[英]How I can make sticky navbar using bootstrap?
hello I'm doing a website and I wish that when I go down the navbar it would be still at the top of the page.你好,我正在做一个网站,我希望当我进入导航栏时,它仍然在页面的顶部。 I tried my strength with jquery and vanilla javascript but unfortunately I couldn't do anything.
我用 jquery 和 vanilla javascript 尝试了我的力量,但不幸的是我什么也做不了。 (sorry for bad English)
(抱歉英语不好)
HTML HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="public/css/main.css">
<link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-center">
<li class="active"><a href="#home">STRONA GŁÓWNA</a></li>
<li><a href="#shop">SKLEP</a></li>
<li><a href="#contact">KONTAKT</a></li>
<li><a href="#portfolio">PORTFOLIO</a></li>
</ul>
</div>
</div>
</nav>
CSS CSS
.navbar-nav.navbar-center {
position: absolute;
left: 50%;
transform: translatex(-50%);
font-size: 15px;
font-family: 'Poppins';
}
navbar-toggle {
margin-top: 23px;
padding: 9px 10px !important;
}
@media (min-width: 768px) {
.navbar-nav>li>a {
padding-top: 26.5px;
padding-bottom: 26.5px;
line-height: 27px;
list-style: none;
}
}
@media screen and (max-width: 767px) {
.navbar-nav.navbar-center {
position: static;
color: #fff;
transform: none;
font-size: 1em;
}
}
Thanks in advance for your help.在此先感谢您的帮助。
将“ sticky-top
”类添加到您的导航类:
<nav class="navbar sticky-top navbar-inverse">
将fixed-top
添加到您的导航类:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.