Help With A Tricky, Sticky Header/Nav Bar Menu

[ConjuringMind]

I’m trying to create an effect where my sticky nav bar/menu has a clear background when a page first loads, but when scrolling down the page a background color fades in to about 50% opacity and remains while scrolling, making the menu items more visible while scrolling. The site I’m working on is here. It is the redesign of an existing older site.

Mentalist For Hire | Comedy Magician for Event Entertainment

I’ve looked around and played with this a bit trying to use a trigger point of some sort, but with no success.

All I’m able to do at this point is hide the menu initally, and then have it fade in with the background color and opacity in place further down the page. I’d like to keep the menu visible and sticky the entire time.

[prakash_s]

Hello @ConjuringMind,

Thanks for writing to us.

I would suggest you add the background color on the Header bar and set it as sticky.

Now uncheck the Hide initially settings. Add this custom CSS code on the customize -->Element CSS.

Add this style there.

$el.x-bar.x-bar-fixed {
    background-color: rgb(141 231 0 / 50%);
}    

Please feel free to change the color code as per your design. The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[ConjuringMind]

Thanks, so much for this! It works great and of course I’ll change the color. It also seems to pop in instantly so I’ll try to find a code that creates more of a gradual fade-in effect with the color. I only asked here as I thought perhaps there was already a setting built into the Pro Builder that I was missing somehow. As far as learning CSS goes, you’re right-- I need to take some time to dig in and learn CSS–I’ve just never really had to except on occasion. Some things are easier to just look up and find the CSS whenever I need it than it is for others, but broadening my knowledge would definitely be a plus. Thanks again for the info! Very much appreciated!

[prakash_s]

Hello @ConjuringMind,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks