Nav bar customisation

Support
#1

Hi, How would i make my menu act the same as this one? My menu is transparent when scrolling [www.approach.online] and i would like it like this one www.theqube.com I cant find a way to add custom javascript or figure out the code to make it happen

#2

Hello Josh,

Thanks for writing to us

I would suggest you go to the Header Bar->Customize ->Element CSS
Add this custom CSS code.

$el.x-bar.x-bar-is-sticky.x-bar-fixed{
  background-color:#000000 !important;
}

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.If you have no idea about coding, you can subscribe to One, where customization questions are answered.

Hope it helps.
Thanks

#3

That didn’t work, it kept it constantly sticky when I would like it to only do that when i scroll down if you understand? I would like it to be transparent then sticky with a black background when I scroll if thats possible?

#4

Hello Josh,

To help you with your concerns, we need to check your settings. I would request please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

  • WordPress Login URL
  • Admin-level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#5

I sent it above

#6

Hi there,

Thank you for providing the credentials. Since you’re using Pro so you can do this easily without custom CSS. First remove the provided CSS and duplicate your Bar 1. Uncheck the Sticky option from Bar 1 so that it is only visible when the scroll position is at the top.

image
image365×629 13.8 KB

Now Inspect the Bar 2 (the duplicated bar) and first set it’s background color to black then under Sticky section, enable Hide Initially option (see screenshot)

image
image369×568 12.1 KB

This should setup the same header as in reference site. Let us know how it goes!