How to make my navbar sticky?

Developer Support CMS Development
1

I have a global header that I’m using on my demo website (http://doubledivision-6635560.hs-sites.com/)

And when I edit the .css file for it to do “position: fixed” it becomes a sticky header but also removes the red background and alligns the menu items to the left (which I obviously don’t want)

How do I make the entire header sticky?

2

Hey @jdotwebster

Try something like this:

.body-wrapper { margin-top: 165px; }@media screen and (min-width:768px ){ .body-wrapper { margin-top: 175px; }}

header {
 position: fixed;
 top: 0;
 width: 100%;
}
3

This works great! Only issue is that is creates a header-shaped white space on our contact us page (http://doubledivision-6635560.hs-sites.com/contact) which isn’t supposed to have a header on there.

Any way to fix this small problem?

4

Hello,

Looks like your css is what is causing the issue. If you don’t want your header on this page try modifying the below only for this page.

.body-wrapper {

margin-top: 100px;

}

The margin-top is what is creating the white-space.

Also you may want to give a "

z-index: 99;"

number to your fixed header to make sure it stays above everything as a user scrolls down. You can see this needed on your initial posts page as you scroll past the 4 column circles which will appear “on top of” the header.

More info on z-index: https://www.w3schools.com/cssref/pr_pos_z-index.asp

5

Not sure if this is the proper way to integrate z-index into the header .css file

/* Header Container */

.body-wrapper { 
 margin-top: 100px; 
 z-index: 99;
}

@media screen and (min-width:768px ){
 .body-wrapper { 
 margin-top: 100px;
 z-index: 99;
 }
}

But this isn’t working when I refresh the website, some elements still override the navbar

6

Edit: fixed with the following

.header {
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 9999;
}
7

Are you still having issues with your contact landing page?

8

Technically yes, but I *sort of* worked around it by making the page’s background a gradient from the top being white and the bottom being dark grey.