How Do I Keep A Nav Bar At The Top Of The Page?
I'm trying to make my nav bar stay at the top of the page like on forbes.com I know I could do nav { position: fixed; top: 0; } but the nav bar isn't at the top of the page,
Solution 1:
the solution is easy, keep your css while adding px
nav
{
position: fixed;
top: 0px;
}
Solution 2:
You could try it in JQuery like this:
HTML:
<divid="wrapper"><header><h1>Floater Navigation</h1></header><nav><p>Navigation Content</p></nav><divid="content"><p>Lorem Ipsum.</p></div></div>CSS:
#wrapper {
width:940px;
margin: 0 auto;
}
header {
text-align:center;
padding:70px0;
}
nav {
background: #000000;
height: 60px;
width: 960px;
margin-left: -10px;
line-height:50px;
position: relative;
}
#content {
background: #fff;
height: 1500px; /* presetting the height */box-shadow: 005pxrgba(0,0,0,0.3);
}
.fixed {
position:fixed;
}
JQuery:
$(document).ready(function() {
// Calculate the height of <header>// Use outerHeight() instead of height() if have paddingvar aboveHeight = $('header').outerHeight();
// when scroll
$(window).scroll(function(){
// if scrolled down more than the header’s heightif ($(window).scrollTop() > aboveHeight){
// if yes, add “fixed” class to the <nav>// add padding top to the #content // (value is same as the height of the nav)
$('nav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
// when scroll up or less than aboveHeight,// remove the “fixed” class, and the padding-top
$('nav').removeClass('fixed').next().css('padding-top','0');
}
});
});
source: http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/
Solution 3:
Here is a way to do it without JQuery. It works by setting a scroll listener to the window, and switching the class of the nav bar when the scroll reaches the right position.
var body = document.getElementsByTagName("body")[0];
var navigation = document.getElementById("navigation");
window.addEventListener("scroll", function(evt) {
if (body.scrollTop > navigation.getBoundingClientRect().bottom) {
// when the scroll's y is bigger than the nav's y set class to fixednav
navigation.className = "fixednav"
} else { // Overwise set the class to staticnav
navigation.className = "staticnav"
}
});h1 {
margin: 0;
padding: 10px;
}
body {
margin: 0px;
background-color: white;
}
p {
margin: 10px;
}
.fixednav {
position: fixed;
top: 0;
left: 0;
}
.staticnav {
position: static;
}
#navigation {
background-color: blue;
padding: 10px;
width: 100%;
}
#navigationa {
padding: 10px;
color: white;
text-decoration: none;
}<h1>
Hello world
</h1><navid="navigation"class="staticnav"><ahref="#">Home</a><ahref="#">About</a></nav><!-- We initialize the nav with static condition --><p>
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text.
</p>Solution 4:
This is how the navigation-bar sticks to the top after scrolling past it.
.affix {
top: 0px;
margin: 0px20px;
}
.affix + .container {
padding: 5px;
}<navclass="navbar navbar-default"data-spy="affix"data-offset-top="50">
...
</nav>"navbar" creates a block on it's own, so all you've to do is mention only the margin in your css file
.navbar {
margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/
z-index: 1;
}
The z-index sets priority to that particular element, so that other elements do not scroll over it. If z-index has a positive value, then it has the highest priority otherwise lowest priority(for negative values).
I hope this is helpful.
Solution 5:
You can use:
nav
{
position: fixed;
top: 0;
left: 0;
}
See this complete example example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
#header {
width: 100%;
height: 90vh;
text-align: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 60px12px;
}
headernav {
width: 100%;
height: 10vh;
background-color: #262534;
display: grid;
align-items: center;
border-bottom: 4px solid #F9690E;
position: fixed;
top: 0;
left: 0;
}
header.nav-item {
display: inline;
margin: 08px;
}
header.nav-item:first-of-type {
margin-left: 48px;
}
header.nav-itema {
color: white;
text-decoration: none;
font-size: 16px;
}
header.nav-itema:hover {
text-decoration: underline;
}
header#more-drop-down-menua:last-of-type:hover {
text-decoration: none;
}
header.nav-itema.active {
text-decoration: underline;
color: #F9690E;
}
/** menu**/menu{
margin-top:14vh;
text-align: center;
}
menup{
font-size: 14px;
line-height:125%;
padding: 25px;
}<header><!-- Start Nav --><nav><ul><liclass="nav-item"><ahref="#Home"class="active">Home</a></li><liclass="nav-item"><ahref="#About">About</a></li><liclass="nav-item"><ahref="#Contact">Contact</a></li><!-- END Drop Down Menu --></ul></nav><!-- End Nav --></header><menu><h1> Example of fixed nav</h1><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque exercitationem ipsa quisquam sunt ex blanditiis iure vero molestias impedit recusandae eius quasi unde assumenda molestiae, dolorem illum, aliquid aut neque?
Error aut voluptatum molestias ad quidem odio labore eaque veniam fugiat earum, aliquid incidunt beatae nam pariatur minus voluptates atque suscipit cupiditate et! Tenetur eveniet delectus aspernatur? Perferendis, modi similique.
Debitis eaque suscipit tenetur, laboriosam perferendis possimus voluptas expedita labore aspernatur. Nobis cum vel quae voluptates pariatur architecto quas labore assumenda ipsam sint tenetur, nisi in non alias quisquam atque.
Animi, exercitationem ullam laudantium dolores praesentium distinctio illo, fugiat iusto soluta quibusdam eius? Quaerat reiciendis voluptatum voluptatibus porro saepe blanditiis nam iure odio soluta, cum ipsam, suscipit molestiae natus eius!
Quasi, quae harum? Fuga facere facilis, cumque veniam voluptatum itaque aspernatur natus ratione nesciunt dolores qui, iste ullam dolorem totam accusantium officiis nisi hic esse reiciendis molestias. Unde, inventore fugiat?
Corrupti similique consequatur provident aliquam voluptates minima modi voluptatibus exercitationem magni, consectetur delectus? Rerum quo cumque dolorem voluptatibus tempora, nesciunt laboriosam eum assumenda deserunt error ullam asperiores velit suscipit corrupti!
Perspiciatis architecto illo quis dolore necessitatibus ad accusantium voluptatem esse ducimus! Modi facilis consequuntur mollitia asperiores praesentium. Tempora vero quod aliquam, alias quis, nisi cumque totam sed odit, hic suscipit.
Aut molestias minus accusantium, cumque, aspernatur quia aliquam accusamus nostrum saepe, eius vero velit. Labore a deserunt voluptate illo, eum eos, ad saepe, eius temporibus quis eaque ea reiciendis soluta!
</p></menu>
Post a Comment for "How Do I Keep A Nav Bar At The Top Of The Page?"