Make top menu transparant

Hello,

How do I make the top menu transparant? See for example: https://www.maf.nl/.

It is only for desktop, laptop, and tablet. Not for mobile phone.

Cheers,
André

Hello @sitepower,

Thanks for asking. :slight_smile:

Pro Theme: Under Header builder > Bar > Design let’s have bar background color as transparent at the same time please remove box shadow.

X Theme: You can add following CSS under X > Launch > Options > CSS for transparent navigation:

.x-navbar {background-color: rgba(0,0,0,0.25) !important;}

Thanks.

Thanks. It is kind of what I want. I still see the top menu when I enter the code, though transparant. Can you make it as in https://maf.nl where the top menu is gone when you first enter the website? And when you scroll down, you can see it just as you have it now with the code you gave me?

Hi there,

Would you mind providing the link to the site that you are working on so that we can check it?

Thank you.

www.digitalezendeling.nl

Hi again,

In Pro you can do this with sticky header option, go to your menu bar inspector > setup and turn on the Sticky Bar (see screenshot)

Then turn on the Hide Initially option under Sticky Setup (see screenshot)

Hope this helps!

I will try it. I keep getting this message though. What to do?

Hi there,

Please check this thread for some troubleshooting tips if you are getting some builder preview warnings:

Hope this helps.

I really have no idea what I should do.

I figured it out. I updated Pro. It had to do with a plugin.

Glad you’ve sorted it out.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.