2
Недавно мне захотелось добавить некоторые текстовые строки на мой сайт, и все было идеально, пока я не добавил мобильную навигацию (выпадающее меню). После этого моя шайба как-то попала в заголовок (навигация), и после этого я не мог понять, что случилось.Реагирующие проблемы с навигацией
Я не хочу переместить его с помощью прокладки, но скорее выясню, почему это так, потому что, прежде чем я добавил мобильную навигацию, у всех было свое особое место, чтобы стоять, и ни одна вещь не перекрывала другую вещь.
http://i.imgur.com/ciqMkpB.png
Вот мой HTML:
<body>
<div id="container">
<header>
<div id="nav">
<nav class="nav-collapse">
<ul>
<li><img alt="icon" src="res/img/logo2.png"></li>
<li><a rel="alternate" href="#" class="current" class="nav-collapse">Home</a></li>
<li><a href="sub/menu1.html">Members</a></li>
<li><a href="sub/menu2.html">Exams</a></li>
<li><a href="sub/menu3.html">Timetable</a> </li>
<li><a href="sub/menu4.html">About</a></li>
<li><a class="fck" href="password.html">Private Site</a</li>
<li id="title">Class Site</li>
</ul>
</nav>
</div>
</header>
<div id="content">
<div id="title">
<div class="marquee">
<h3>Welcoke...</h3>
</div>
</div>
<div id="article" text-align="center">Website was made by ŽP, JM and TM!
</div>
</div>Вот мой основной CSS код:
body {
margin:0px !important;
padding:0px;
bottom:0px;
background:#3EA6FA url('../img/11.png') no-repeat center center fixed;
}
@media screen and (max-width: 480px) {
body {
background-size: 100%;
background-position:0% 58%;
}
}
@media screen and (max-width: 900px) {
body {
background-size: 100%;
}
}
body:after {
opacity:4;
}
hr {
border:2px solid #DED5CA;
}
a {
color:white;
cursor:pointer;
text-decoration:none;
}
#bg {
display:block;
position:relative;
}
#bg:before {
content:"";
position:absolute;
z-index:-1;
opacity:0.5;
top:0;
left:0;
bottom:0;
right:0;
}
#nav {
font-family:"Lobster";
font-size:22px;
}
#nav #title {
color:white;
font-weight:bold;
margin-top:15px ;
margin-right:20px;
float:right;
font-size:26px;
}
#nav a {
float:left;
}
#nav img {
float:left;
height:48px;
margin-top:5px;
margin-left:10px;
margin-right:10px;
}
#nav ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#454443;
border-bottom:3px solid #757575;
}
#nav li a {
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
border-bottom:3px solid #454443;
}
#nav li a:hover {
animation-name:navlink;
animation-duration:0.35s;
background:#0276F2;
border-bottom:3px solid #325AFA;
}
#nav li a.current {
border-bottom:3px solid #325AFA;
}
@keyframes navlink {
from {
background-color:#3D362B;
}
to {
background-color:#0276F2;
}
}
#container {
font-family:"Oswald", "Bree Serif";
margin:0px;
}
#content {
margin:2%;
bottom:0px;
position:relative;
font-size:16px;
border:2px solid white;
background:rgba(255, 255, 255, 0.3);
text-align:center;
}
#content #title {
margin-left:2% !important;
margin-right:2% !important;
color:black;
font-family:"Lobster";
font-size:32px;
text-align:center;
border-bottom:2px dashed white;
}
и моя новая мобильная навигация:
body, div,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, dl, dt, dd, ol, ul, li, hr,
fieldset, form, label, legend, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section,
summary, hgroup {
margin: 0;
padding: 0;
border: 0;
}
a:active,
a:hover {
outline: 0;
}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
/* ------------------------------------------
RESPONSIVE NAV STYLES
--------------------------------------------- */
.nav-collapse ul {
margin: 0;
padding: 0;
width: 100%;
display: block;
list-style: none;
}
.nav-collapse li {
width: 100%;
display: block;
}
.js .nav-collapse {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
overflow: hidden;
zoom: 1;
}
.nav-collapse.opened {
max-height: 9999px;
}
.disable-pointer-events {
pointer-events: none !important;
}
.nav-toggle {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
@media screen and (min-width: 40em) {
.js .nav-collapse {
position: relative;
}
.js .nav-collapse.closed {
max-height: none;
}
.nav-toggle {
display: none;
}
}
/* ------------------------------------------
FIXED HEADER
--------------------------------------------- */
/* ------------------------------------------
MASK
--------------------------------------------- */
header {
background: #454443;
position:absolute;
z-index: 3;
width: 100%;
left: 0;
top: 0;
}
.mask {
-webkit-transition: opacity 300ms;
-moz-transition: opacity 300ms;
transition: opacity 300ms;
background: rgba(0,0,0, .5);
visibility: hidden;
position: fixed;
opacity: 0;
z-index: 2;
bottom: 0;
right: 0;
left: 0;
top: 0;
}
.android .mask {
-webkit-transition: none;
transition: none;
}
.js-nav-active .mask {
visibility: visible;
opacity: 1;
}
@media screen and (min-width: 40em) {
.mask {
display: none !important;
opacity: 0 !important;
}
}
/* ------------------------------------------
NAVIGATION STYLES
--------------------------------------------- */
.nav-collapse,
.nav-collapse ul {
list-style: none;
width: 100%;
float: left;
}
@media screen and (max-width: 480px) {
.nav-collapse {
float: left;
width: auto;
}
}
.nav-collapse li {
float: left;
width: 100%;
}
@media screen and (min-width: 40em) {
.nav-collapse li {
width: auto;
}
}
.nav-collapse a {
-webkit-tap-highlight-color: rgba(0,0,0,0);
border-top: 1px solid white;
text-decoration: none;
background: #454443;
color: #fff;
width: 100%;
float: left;
}
.nav-collapse a:active,
.nav-collapse .active a {
background: #325AFA;
}
@media screen and (min-width: 40em) {
.nav-collapse a {
text-align: center;
border-top: 0;
float: left;
margin: 0;
}
}
.nav-collapse ul ul a {
background: #ca3716;
padding-left: 2em;
}
@media screen and (min-width: 40em) {
.nav-collapse ul ul a {
display: none;
}
}
/* ------------------------------------------
NAV TOGGLE STYLES
--------------------------------------------- */
@font-face {
font-family: "responsivenav";
src:url("../icons/responsivenav.eot");
src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
url("../icons/responsivenav.ttf") format("truetype"),
url("../icons/responsivenav.woff") format("woff"),
url("../icons/responsivenav.svg#responsivenav") format("svg");
font-weight: normal;
font-style: normal;
}
.nav-toggle {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none;
text-indent: -300px;
position: relative;
overflow: hidden;
width: 60px;
height: 55px;
float: right;
}
.nav-toggle:before {
color: #fff; /* Edit this to change the icon color */
font: normal 28px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
text-transform: none;
text-align: center;
position: absolute;
content: "\2261"; /* Hamburger icon */
text-indent: 0;
speak: none;
width: 100%;
left: 0;
top: 0;
}
.nav-toggle.active:before {
font-size: 24px;
content: "\78"; /* Close icon */
}
Вы попробовали 'navbar-fixed-top' и положили' padding-top: 50px; 'в стиль тела? – timmyRS
@timmyRS Вы имеете в виду это: '#nav {position: fixed top; padding-top: 50px? В результате получится: http://i.imgur.com/vztx389.png –
нет, я имею в виду, что вы исправляете навигационную панель вверху и даете другому контенту (телу) дополнение 50 – timmyRS