Archived topic
Desktop and mobile sticky menu variations
5 replies · Started by Doug on August 22, 2022
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;
}
Hi Doug,
To clarify, do you want that header background color “before scrolling” and “after scrolling” on mobile only?
Yes. That was the idea, but only on mobile.
I like how it is working on desktop as transparent before scrolling.
I see. You can adding this CSS:
@media (max-width: 768px) {
.main-navigation.mobile-header-navigation {
background-color: #E6D6C3;
}
}Perfect! Thank you again.
You’re welcome Doug!
