这是我没想到的。我在页面顶部有一个Bootstrap Navbar,但是当我将navbar-fixed
元素放入Navbar时,它会覆盖我在其下面的第一个<section>
HTML标记。我将在下面发布我的代码,但我想要的是在我的网站上有一个固定的导航栏,而不是在我的第一部分上空盘旋。
导航栏
<nav class="navbar navbar-default navbar-fixed" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RTD62</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#about" class="smoothScroll">About Me</a></li>
<li><a href="#articles" class="smoothScroll">Articles</a></li>
<li><a href="#talks" class="smoothScroll">Talks</a></li>
<li><a href="#experience" class="smoothScroll">Experience</a></li>
<li><a href="#contact" class="smoothScroll">Get In Touch</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li><a href="#" target="_blank"><i class="fa fa-medium"></i> Medium</a></li>
<li><a href="#" target="_blank"><i class="fa fa-dribbble"></i> Dribbble</a></li>
<li><a href="#" target="_blank"><i class="fa fa-behance"></i> Behance</a></li>
</ul>
</div>
</div>
</nav>
第一个HTML部分
<section class="about" id="about">
<div class="container">
<div class="hidden-xs" align="center">
<amp-img src="img/Me.jpg" height="250" width="250" style="border-radius: 200px"></amp-img>
<h3>Robert Dewitt</h3>
<p>Front End Web Developer</p>
</div>
</div>
<br />
</section>
答案 0 :(得分:0)
简单的解决方案在导航栏周围做一个div。称之为你喜欢的任何东西,或者如果你有一个标题你的导航应该在里面。
让我们说它叫做headerbox
.headerbox { 位置:固定; 上:100% }
有帮助?
+代表我感谢