[Resolved] primary navigation color change when scrolling down

[dyami]

Hi Tom,

I’ve tried a lot of different codes but I can’t make it work.
The primary navigation is transparent. What can I do to change the color when scrolling down?
(for example black or white)

The code I now have in the Additional CSS section is:

.main-navigation:not(.is_stuck) {
position: fixed;
left: 0;
right: 0;
}

Thanks!

[David]

Hi there,

to begin you can use the Sticky Navigation function in the Customiser, to fix the navigation when scrolled, so that CSS isn’t required. Then you can target it like so:

#sticky-navigation {
	background-color: #fff;
}

[dyami]

Thanks it worked for the most part. When I scroll down the navigation bar turns white, but when it’s on the top of the page it is a light grey/ white color. Not transparent.
Also, is it possible for the navigation to change text color when scrolling down? (from white to black)

[David]

Can you share a link to the site? You can edit the original topic and use the Site URL field for privacy

[dyami]

Sure!
I’ve just added the link in the original post.

[David]

OK so a bit more CSS, the first two rules are to move the page content under the navigation. Note that this may effect the way your Page Builder operates so this may need to be commented out when your editing the page. The third code will allow you to style the sticky nav text color.

#site-navigation {
	position: relative;
}
#page {
	margin-top: -45px;
}

#sticky-navigation .main-nav ul li a {
	color: #000;
}

[dyami]

Thank you so much David! It worked and it looks perfect now 🙂 🙂

[David]

Glad to be of assistance 🙂

[dyami]

Oh, just one more question. Do you know why there is a very thin white line above the page?
This happened after I added the 3 CSS codes.

[Leo]

That’s because margin-top: -45px is used and the height of that header is 45.6px

I would recommend using our page header add-on to insert that hero image/slider:
https://docs.generatepress.com/article/page-header-content/

Then you can use the instruction here to merge it with navigation:
https://docs.generatepress.com/article/merging-the-page-header-site-header/

Let us know if this helps.

[dyami]

I used your page header add-on and it looks great!
Thanks for all the support!
🙂

[Leo]

No problem 🙂

[Author]

Posts