I'm trying to build a fixed navbar with a margin-top on top of a website which has a background texture. I'd like the content of the website to be hidden but the navbar when scrolling down but I want to keep this empty margin-top the all time. Here is the over simple html:
<nav>
My Fixed navbar with margin on top
</nav>
<div id="content">
My content that shouldn't apppear in the margin-top of the navbar
</div>
I have made a jfiddle to explain my problem: https://jsfiddle.net/nicoj/ttL3mp4r/8/
Basically the content is hiding behind the navbar when scrolling down which is cool but is reappearing above it after...
What I would like to do is to prevent the content from reappearing above the navbar: Keeping the navbar and the background image on top the whole time. I was thinking of having the #content fixed too with an overflow: scroll but then the scrollbar is embedded inside the content which I don't want.
I feel like I'm missing something simple here... I hope you have any tips!
Nico
Considering the fact that your background is fixed as well, there's a pretty quick and easy way to solve this:
HTML
<div id="overlay">
</div>
<nav>
fixed navbar
</nav>
<div id="content">
My content that should not appear above the navbar
</div>
CSS
#overlay {
position: fixed;
background-image: url("http://allroundnews.com/wp-content/uploads/2012/02/seamless-wood-texture-free-76.jpg");
width: 100%;
height: 50px;
margin: 0;
top: -20px;
margin-left: auto;
margin-right: auto;
}
I'm sure there are better ways to solve this, but this seemed like an easy fix for a simple issue.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments