XF 2.2 How to make navigation row background color change after scrolling down?

[EchoRomeo]

On my site (permittingforum.com), I have my navigation row color set to the background color (@xf-chromeBg). This is great when scrolled to the top of the page because it lets you see through to the header graphic but, when I start to scroll down, the navigation row background (which is sticky) switches to match the white background of the other site elements (e.g., the forum list) and you're no longer able to distinguish the white text of the navigation row buttons. This is also a problem on mobile devices where the header doesn't show and it's just the white navigation row with white text.

Does anyone know what I need to do to make the navigation row background color change (e.g., to a color similar to the header background) once the user has scrolled down past the header? I know there's a way to do this because I've seen it on other sites but have looked all over and haven't been able to figure this out.

Thank you!

 

[Mr Lucky]

Try this

.is-sticky .p-nav
{background-color:red}

in template extra.less

If that doesn't work try

.is-sticky .p-nav
{background-color:red!important}

 

[Russ]

You're using our Bolt - Header style which approaches it slightly uniquely way. You can edit just:

Style properties - > Navigation row -> Background color and that will change the background color for the sticky nav and the mobile nav. When it's not sticky and not on mobile, we use the custom opaque color.

 

[EchoRomeo]

Try this

.is-sticky .p-nav
{background-color:red}

in template extra.less

If that doesn't work try

.is-sticky .p-nav
{background-color:red!important}

Thank you! Will keep that code option in mind for future. Looks like I just didn't understand this mechanic of my Bolt style. @Russ cleared it up for me.

 

[EchoRomeo]

You're using our Bolt - Header style which approaches it slightly uniquely way. You can edit just:

Style properties - > Navigation row -> Background color and that will change the background color for the sticky nav and the mobile nav. When it's not sticky and not on mobile, we use the custom opaque color.

That worked! I didn't think to try that. Thanks for clearing that up for me!

 

[Mr Lucky]

Looks like I just didn't understand this mechanic of my Bolt style

Ah OK didn’t realise it was a custom style.