-4
Я часами пытаюсь понять, почему навигационная система не нажимает рядом с логотипом, а также, когда я пытаюсь просмотреть веб-сайт в размер экрана для мобильного телефона, кнопка переключения далеко вниз по странице, когда это также должно соответствовать логотипу.Gumby совмещает навигацию с логотипом и кнопкой переключения
Я добавил две фотографии, чтобы объяснить далее.
Heres мой код:
Index.html:
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Short Bark & Sides Bexleyeath | Dog Grooming</title>
<meta name="description" content="Welcome to Short Bark & Sides, based in Bexleyheath we are one of the few to offer amazing prices and a 5 star service." />
<meta name="keywords" content="dog, grooming, bexleyheath, health, check, short, bark, and, sides, woof, bow, bone" />
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/ico" href="favicon.ico" />
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/gumby.css" media="screen">
<script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container">
<div class="mainsection">
<h1 class="four columns logo">
<a href="#">
<img class="left" src="images/logo.jpeg" alt="Logo" gumby-retina />
</a>
</h1>
<div class="navbar row" id="nav2">
<a class="toggle" gumby-trigger="#nav2 > ul" href="#"><i class="icon-menu"></i></a>
<ul class="eight columns">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="apps.html">Our Apps</a></li>
<li><a href="current.html">Live Projects</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<footer>
© Short Bark & Sides 2012-2013, Website Created by <a href="http://danielsheen.co.uk">Daniel Sheen</a>
</footer>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.9.1.min.js"><\/script>')</script>
<!--
Include gumby.js followed by UI modules.
Or concatenate and minify into a single file
<script src="js/libs/gumby.js"></script>
<script src="js/libs/ui/gumby.retina.js"></script>
<script src="js/libs/ui/gumby.fixed.js"></script>
<script src="js/libs/ui/gumby.skiplink.js"></script>
<script src="js/libs/ui/gumby.toggleswitch.js"></script>
<script src="js/libs/ui/gumby.checkbox.js"></script>
<script src="js/libs/ui/gumby.radiobtn.js"></script>
<script src="js/libs/ui/gumby.tabs.js"></script>
<script src="js/libs/ui/jquery.validation.js"></script>
<script src="js/libs/gumby.init.js"></script>
-->
<script src="js/libs/gumby.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
И gumby.css (я взял лишь навигационный код в противном случае его путь слишком длинный:
/*=====================================================
Navigation (with dropdowns)
======================================================*/
.navbar {
width: 100%;
display: inline;
line-height: 150px;
}
@media only screen and (max-width: 767px) {
.navbar {
position: relative;
border: none;
}
.navbar .column, .navbar .columns {
min-height: 0;
}
}
.navbar.fixed {
top: 0;
left: 0;
z-index: 99999;
}
.navbar a.toggle {
display: none;
}
@media only screen and (max-width: 767px) {
.navbar a.toggle {
top: 5%;
right: 4%;
width: 46px;
position: absolute;
text-align: center;
display: inline-block;
color: #65a3e6;
background: #071e37;
height: 40px;
line-height: 38px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
font-size: 30px;
font-size: 1.875rem;
}
.navbar a.toggle:hover {
background: #0a2a4e;
}
.navbar a.toggle:active, .navbar a.toggle.active {
background: #041220;
}
}
.navbar .logo {
display: inline-block;
margin: 0 2.12766% 0 0;
padding: 0;
height: 60px;
line-height: 58px;
}
.navbar .logo a {
display: block;
padding: 0 0 0 16px;
overflow: hidden;
height: 60px;
line-height: 58px;
}
@media only screen and (max-width: 767px) {
.navbar .logo {
float: left;
display: inline;
}
.navbar .logo a {
padding: 0;
}
.navbar .logo a img {
width: auto;
height: auto;
max-width: 100%;
}
}
.navbar ul {
display: table;
vertical-align: middle;
margin: 0;
float: none;
}
@media only screen and (max-width: 767px) {
.navbar ul {
position: absolute;
display: block;
width: 100% !important;
height: 0;
max-height: 0;
top: 60px;
left: 0;
overflow: hidden;
text-align: center;
background: #041220;
}
.navbar ul.active {
height: auto;
max-height: 600px;
z-index: 999999;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-box-shadow: 0 2px 2px black;
-moz-box-shadow: 0 2px 2px black;
box-shadow: 0 2px 2px black;
}
}
.navbar ul li {
display: table-cell;
text-align: center;
padding-bottom: 0;
margin: 0;
height: 60px;
line-height: 58px;
}
@media only screen and (max-width: 767px) {
.navbar ul li {
display: block;
position: relative;
min-height: 50px;
max-height: 320px;
height: auto;
width: 100%;
border-right: 0 !important;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
}
.navbar ul li > a {
display: block;
padding: 0 16px;
white-space: nowrap;
color: #65a3e6;
text-shadow: 0 1px 2px black, 0 1px 0 black;
height: 60px;
line-height: 58px;
font-size: 16px;
font-size: 1rem;
}
.navbar ul li .btn {
border-color: black !important;
}
.navbar ul li.field {
margin-bottom: 0 !important;
margin-right: 0;
}
@media only screen and (max-width: 767px) {
.navbar ul li.field {
padding: 0 20px;
}
}
.navbar ul li.field input.search {
background: black;
border: none;
color: #f2f2f2;
}
.navbar ul li:hover > a {
position: relative;
background: #868d92;
z-index: 1000;
}
.navbar ul li .dropdown {
width: auto;
min-width: 0px;
max-width: 320px;
height: 0;
position: absolute;
background: #fafafa;
overflow: hidden;
z-index: 999;
}
.navbar ul li:hover .dropdown {
min-height: 50px;
max-height: 561px;
overflow: visible;
height: auto;
width: 100%;
padding: 0;
border-top: 1px solid #041220;
-webkit-box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.3);
}
@media only screen and (max-width: 767px) {
.navbar ul li .dropdown {
width: 100%;
max-width: 100%;
position: relative;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.navbar ul li:hover .dropdown {
border-bottom: 1px solid #01050a;
}
.navbar ul li:hover .dropdown ul {
position: relative;
top: 0;
background: #020a13;
min-height: 50px;
max-height: 250px;
height: auto;
overflow: scroll;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.navbar ul li:hover .dropdown ul li {
min-height: 50px;
border-bottom: #041220;
}
.navbar ul li:hover .dropdown ul li a {
color: white;
border-bottom: 1px solid #01050a;
}
.navbar ul li:hover .dropdown ul li a:hover {
color: #3794e6;
}
}
@media only screen and (min-width: 768px) and (max-width: 939px) {
.navbar > ul > li > .btn a {
padding: 0 10px 0 10px !important;
}
.navbar ul > li .dropdown ul li:hover .dropdown {
left: -320px;
}
}
Если кто-то может помочь, было бы здорово.
Этот код ничего не делает. –