[Support request] Desktop and mobile sticky menu variations

[Doug]

Thanks again for your great support. The site is https://www.lighthousebuilds.org (I’ve shared user login)

On mobile before I scroll I get a transparent header – https://www.screencast.com/t/Zl5q3bxaIg — I set the Navigation Background to be transparent so on desktop it looks like https://www.screencast.com/t/t6jkneiorD8

Can I have the Primary Navigation look like this: https://www.screencast.com/t/UMcFRgu8JJsx — which is what it does when you start to scroll on mobile?

Hope that makes sense. This is the CSS I added:

.main-navigation.is_stuck,
.main-navigation.is_stuck ul ul{
background-color: #E6D6C3;
}
.main-navigation.navigation-stick .main-nav ul li a,
.main-navigation.navigation-stick a:not([aria-label*=’Close’]) {
color: #000 !important;
}

[Fernando]

Hi Doug,

To clarify, do you want that header background color “before scrolling” and “after scrolling” on mobile only?

[Doug]

Yes. That was the idea, but only on mobile.

I like how it is working on desktop as transparent before scrolling.

[Fernando]

I see. You can adding this CSS:

@media (max-width: 768px) {
    .main-navigation.mobile-header-navigation {
        background-color: #E6D6C3;
    }
}

[Doug]

Perfect! Thank you again.

[Fernando]

You’re welcome Doug!

[Author]

Posts