Transparent Header to Solid White | UberMenu Permanent Mobile Button

I’m going for this look: https://wearemotto.com/. I’d like to have a transparent header with white logo/menu button over a slider. On scroll, the header turns solid white and the logo/menu button turns black. How can I accomplish this?

Also, to accomplish the above, I need to make the UberMenu a permanent button. Is this possible?

Installed Version: 5.2.0

Any help will be greatly appreciated.

Hi There,

This would be possible but would custom development but it would be out of the scope of our support.

If you use Pro Theme Instead you could set a transparent bar that disappears on scroll while a bar with colored background appear on scroll and give you a similar effect.

Hope it helps

Hi,
I try to create this scroll color effect on pro version, I wonder how I can assign a class to my bar and don’t know how to write the codes. Any links about this feature for Cornerstone will be welcome.

Hey Matt,

You don’t need custom codes if you’re using Pro so you don’t have to assign a class. Please watch the setup in the video below.

Hope that helps.

1 Like

Hi Christian,
Yes it helped but it bring me to another issue. I wonder why I can’t center my logo with my lauchpad button, please have a look : www.expertcomptable.ca

Looks like I should paste some codes in order to get a change color effect when hover on a bar…

Hi Matt,

Tested your website and found that the logo is centered with the launched button.

Regarding the background color change on hover on the bar, regretfully, there is no such option to add any interaction color to the bar element, you may need to add some custom CSS code to achieve it. If you are not proficient, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Hope it helps.
Thanks

Ok thanks, actually I am following a The Complete Web Developer Course 2.0 that recommended me to buy the theme X from themeco, so I would like learn by myself how to do such a thing. And again, I would like to know how to access not the code editors but the classes and the whole HTML scripts. Have a good day

Hi Matt,

If you want to know how to target the CSS classes HTML, you need to know about Inspect Element.

Hope that helps.

Thank you.

You helped me more than you think because by the way I got the 90% discount on Hostinger!

Hi Matt,

Glad to help you.

Thanks