Transparent Navigation bar

Shapely
1

Hi,

After quite some time I succeeded making it transparent, but it only happens after I start scrolling.
How to get it transparent from the start, in standard position (now the bar appears on a white background).

I used this custom css to get transparency:

.main-navigation {
background-color: transparent;
}

Do I need to get the Meta Slider I use to the top? Or should I add some code to get the effect I want?

This is the website:
" target="_blank">http://fietseninrio.nl

2

Hi @janwillem,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

nav#site-navigation {
    background: transparent;
}

Best Regards,
Movin

3

Hey, sorry I have a question, I’ve made a hero image in visual composer as opposed to using the shapely header etv and I’m trying to get the menu background transparent so the menu is over the image.

I believe I have made the menu bar transparent using the above code, as you can see when I scroll down it works. But when I move the visual composer content up (so that it’s below the menu bar) for some reason my page background color is showing through. it’s like it’s cutting off visual composer as it goes underneath the nav bar.

Could there be something blocking it, or is my visual composer z-index too low? (don’t know why it would be that though as if it would be that surely my background color would cover the whole page.)

It’s really puzzling me, any info would be great thanks. Love the theme by the way.

This is the site… shadowkeymusic.com

4

Hi @skey,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin