Transparent menu bar cropping container (with white color)

Hello, I want to have a transparent navigation menu bar, for that I’m using this code:

nav#site-navigation {
    background: transparent;
}

The issue I’m having is that I have a container with a background image and I want to display it behind the transparent bar. For that I’m using this code
#background-login-container { top: -50px;
in order to move up my container, but it get’s cropped (hide behind) by the navigation bar (in white).

What should I do?
Thanks in advance.

I guess the problem is that I’m targeting a wrong property in my CSS.
I need the transparency only on the mobile menu bar.

The previous code work well when I scroll on the desktop version of the site.

Where should I apply the transparency in order to get the same effect without scroll on the mobile version?

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it and test out some solutions?

Best Regards,
Support

Hi, thanks for your replay.

unfortunately I am working on a local server, using only Bitnami LAMP.

Is there any other way you can help me? I just need to have a transparent menu bar on top of my image in the mobile version of my page.

Hello Cosme,

I would love to help, but unfortunately, without your website’s url we cannot know for certain what changes you made the theme’s files and the style in order to offer proper help.
I would advise to please contact us again once your website is live so we can offer you the CSS you need.

All the best,
Mihaela

It’s me again, sorry for the trouble.

I think I almost achieve what I want, I am using the following code:

#masthead {
 background: none;
 position: fixed;
 z-index: 3;
 width: 100%;
}
.nav-container {
 background: none; 
}
.main-navigation{
 background: none; 
}
#site-navigation{
  border:none;
}
#site-navigation .module.left{
  background: #ffffff;
}

And I almost got what I want, there is still a section that I would like to be white when the menu is active. If I put a white background on this element #site-navigation .container > .flex-row I get what I want, but the problem is that in doing that I get a white bar on the menu even when is not active.

Do you have any idea that could help me?

Thanks again, cheers.

Hello there,

We cannot see the page to provide any accurate code however here is come CSS to extend the white background of the nav bar:


@media screen and (min-width: 1001px) {
nav {
    height: 149px;
}
}

Best Regards,
Support