问题描述
我试图在具有100%高度的身体中添加粘性响应式导航栏,但是每当我尝试查看移动屏幕尺寸时,导航栏就会向右侧边缘化。
此外,当我在其中包含Bootstrap的页面中尝试相同的代码时,NavBar中的填充和边距变得不平衡(也许Bootstrap使用HTML5)。
这是我的CSS和HTML代码。第一个是CSS,最后一个是带有Javascript的HTML。
/* Navbar css */
.MainBody {
padding-top: 0px;
text-align: center;
background: linear-gradient(rgb(240,251,255),rgb(168,203,255));
background-attachment: fixed;
height: 1000px;
padding: 0px;
}
.topnav {
overflow: hidden;
background-color: #020f3b;
position: fixed;
/* Safari */
width: 100%;
top: 0;
z-index: 1;
}
.topnav a {
float: left;
display: block;
color: #ffffff;
text-align: center;
font-weight: bold;
padding: 11px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #a3dcff;
color: black;
}
.topnav a.active {
background-color: #0099ff;
color: white;
}
.topnav .icon {
display: none;
}
@media only screen and (max-width: 909px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
background: rgb(0,73,146);
float: right;
display: block;
}
}
@media only screen and (max-width: 909px) {
.topnav .responsive {
position: fixed;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Navbar Css <:: */
<body class="MainBody">
<div class="topnav" id="myTopnav">
<a href="https://apps.webmatrices.com/adsense-eligibility-checker" class="active">AEC Tool</a>
<a href="https://webmatrices.com/sponsor-adsense-eligibility-checker/" target='_blank'>Sponsor or Buy AEC</a>
<a href="https://webmatrices.com/" target='_blank'>Webmatrices</a>
<a href="https://blog.webmatrices.com/" target='_blank'>Our Blog</a>
<a href="https://facebook.com/webmatrices" target='_blank'>Facebook Page</a>
<a href="https://facebook.com/iambishwas" target='_blank'>Creator's Facebook</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
<!-- Navbar script ::> -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<!-- Navbar script <:: -->
<!-- Navbar Bar | nv <:: -->
</div>
</body>
解决方法
这是由于HTML和HTML5(引导程序)的冲突而发生的。我得到了错误兄弟。我建议您在HTML文件顶部使用<!DOCTYPE HTML>
,这将100%解决您的问题。
当屏幕位于display: none
下方时,菜单设置为910px
如果您不希望菜单在移动设备上消失,请删除此CSS:
@media only screen and (max-width: 909px)
.topnav a:not(:first-child) {
display: none;
}