Transparent Navbar in Mobile

Support
#1

Hello,

I have a transparent header/nav bar in my website, but on Mobile, it turns to navy. How can I make it transparent or black?

Thank you!

#2

Hello There,

Thanks for writing in! It turns out that you have set up the transparent navbar incorrectly. You have set a transparent color in the theme options and it is applied in all the pages. When you check your other pages, the menu items are not visible because it is of white color. To resolve this, please do the following:
1.) Please set the global colors for your navbar and for the menu items.
2.) We will only need to customize the navbar that appears in the homepage.
3.) please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.home .x-navbar, 
.home .x-navbar .sub-menu {
    background-color: hsla(0,0%,0%,0) !important;
}

.home .x-navbar .desktop .x-nav > li > a, 
.home .x-navbar .desktop .sub-menu li > a, 
.home .x-navbar .mobile .x-nav li a {
    color: hsl(0,0%,100%);
}

.home .x-navbar .desktop .x-nav > li > a:hover, 
.home .x-navbar .desktop .sub-menu li > a:hover, 
.home .x-navbar .mobile .x-nav li a:hover {
    color: hsl(0,0%,80%);
}

Hope this helps. Please let us know how it goes.

#3

Hi RueNel,

Thanks, but this didn’t seem to change anything…?
The mobile nav/header is still navy.

Thank you!

#4

Hey There,

The navy color is coming from your custom css code:

@media (max-width: 979px) {
  .masthead {
    position: relative;
    width: auto;
    background-color: #001937;
  }
}

Remove the background color and your issue will be resolved.

#5

Hi,

Ah, that was from a previous support CSS code I received.
I removed it and now it’s white, although your previous CSS should have made it transparent.
Or is it transparent and my background naturally white (even though I’ve set it to black)?
If there’s no way to make it the section below the nav bar part of the nav bar background, how can I make it just black?

Thank you and sorry for the many questions!

#6

Nevermind, you solved this with the other post! Thank you!

#7

Hello There,

I am not seeing a white header area in your site. It has been resolved already with the fixed navbar both on desktop and mobile so that your first section will be the same height as the browser.

This is what I am seeing:

Happy New Year!

1 Like
#8

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