Я пытаюсь написать название сайта и слоган наверху, чтобы зафиксировать navbar. У меня есть фиксированный навигатор, но если я напишу название сайта и слоган, навигатор останется наверху.
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">My top 5 music</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="nirvana.php">Nirvana</a></li>
<li><a href="gnr.php">Guns N'Roses</a></li>
<li><a href="beatles.php">The beatles</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
Я пытаюсь так же, как это
Чтобы добиться эффекта в вашей ссылке на ссылку, вы могли бы сначала задать заголовок для позиции: relative в css, а затем добавить затем изменить его на позицию: фиксированный, как только пользователь прокрутил простую точку на экране, например
HTML:
<div class="site-name">Site name</div>
<div class="nav-bar">Nav bar</div>
CSS:
.nav-bar {
position: relative;
}
.nav-bar.open {
position: fixed;
}
JS:
var scrollingNav = function() {
if ($(window).scrollTop() >= 50) {
$('.nav-bar').addClass('open');
}
else {
$('.nav-bar').removeClass('open');
}
};
$(window).scroll(function () {
scrollingNav();
});
Пример: https://jsfiddle.net/s5pwu3cj/1/
Просто добавьте, конечно, раздел в верхней части вашего навигатора. Поэтому вы можете в принципе сделать что-то подобное.
HTML:
<div id="slogan">Slogan here</div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#">My top 5 music</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="nirvana.php">Nirvana</a></li>
<li><a href="gnr.php">Guns N'Roses</a></li>
<li><a href="beatles.php">The beatles</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
CSS:
.navbar-fixed-top {
top: 20px;
}
#slogan {
top: 0;
position: fixed;
}
Как насчет чего-то вроде этого: JSFiddle
Я только что добавил еще один navbar
над оригиналом и navbar
оригинал
HTML
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<h3>Logo</h3>
</div>
</nav>
<nav class="navbar navbar-inverse navbar-fixed-top navbar-nav">
...
</nav>
CSS
.navbar-nav {
top: 50px;
}