Transparent menu bar over visual composer content

Shapely
1

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

I tried using this code from another thread…

nav#site-navigation {
background: transparent;
}

I have made the menu bar transparent using the above code, as you can see when I scroll down the page 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 another section 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 content.)

It’s really puzzling me, any info would be great thanks.

This is the site… shadowkeymusic.com

2

Hi @skey,

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

It seems this is happening because your body background color is black.

You can try resolving 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


html body.custom-background,
nav#site-navigation {
background: transparent;
}

Best Regards,
Movin

3

I tried it but it’s still not working, would it be something to do with the body content position? Like maybe the body is set to start at 50px or something to leave space for the menu bar, so it’s kindof masked out when anything goes above it? That’s the only thing I can think of?

4

I visited your shared site to troubleshoot it but i didn’t find the provided css code anywhere in the page markup.

Could you please tell me where you have added it so that i can troubleshoot it?

5

Yeah sorry I took the code back out and had some css in visual composer, I’ve put everything under shapely options now for you so you should see the effect it’s having now. I’ve also moved the visual composer content up -20 just so you can see the cutoff.

Thanks,

6

I visited your site and it’s working fine for me as shown in the attached screenshot.

Please try clearing your browser cache.

7

But is that only transparent when scrolled down the page? I cleared my cache but the nav bar is still white when it’s at the top of the page? I’m trying to get it transparent both fixed and scrolled

8

Actually it is transparent but the background color of your site is also transparent so displaying the default webpage white color therefore it seems like navigation menu is not transparent and having white background color but it is transparent.

You can confirm it by changing your site background color using the below CSS code.

html body.custom-background {
    background: #B2B3B5 !important;
}
9

It seems the nav bar is transparent, but my question then is, why is the background color showing underneath the nav bar and not the visual composer content? Surely if you move the content up the page and the nav bar is transparent the content should show instead of the background?

I’ve attached 2 screenshots, both are shots of the nav bar at the top (fixed). One is the standard positioning, (just so you can see the rounded tops of the tape machine in the picture) And in the second shot I have moved the visual composer content up by -80px (so it should now be seen through the transparent nav bar) but as you can see, the white background color is cutting the picture off.

If the nav bar is transparent why is the picture getting cut off by a background color like that and not just appearing underneath? Is there another section there that needs to be hidden or something (like a page heading section or something that hasn’t been removed properly taking up that space)?

10
It seems the nav bar is transparent, but my question then is, why is the background color showing underneath the nav bar

It is already answered in my previous reply.

and not the visual composer content? Surely if you move the content up the page and the nav bar is transparent the content should show instead of the background?

Actually this is not happening because initially the nav bar is not fixed and it gets fixed when you scroll the page.

If you want it to always be fixed then try using the below CSS code.

header#masthead {
    top: 0;
    width: 100%;
    z-index: 999;
    left: 0;
    position: fixed;
    right: 0;
}
11

Yeah that last code has worked in combination with the other one, thanks. Guess it just wasn’t happening because the nav bar wasn’t fixed from the start. Final code was…

html body.custom-background,
nav#site-navigation {
background: transparent;
}

header#masthead {
    top: 0;
    width: 100%;
    z-index: 999;
    left: 0;
    position: fixed;
    right: 0;
}

Thanks for the help I appreciate it.

12

You are most welcome here :slight_smile: