Transparent navbar not working

[Upbeater]

Hi,
I’ve been trying to find the solution here in the forum and I’ve tried to add different custom CSS that was suggested but it’s still can’t make my navbar/header section transparent on all pages. Toggling the option “Transparent navbar” doesn’t work either.

I’d also like to make the mobile button transparent.

Can you help me with this?

Note. I managed to make the navbar transparent using the below code. However, it’s only working on the home page upbeater.com for web and not on mobile or other pages (like for example upbeater.com/society). It also messes up so I can’t add more padding over the logo.

/transparent navbar/

.home .masthead .x-navbar {
background-color: transparent ;
}

.home .masthead + div {
margin-top: -91px !important;
}

.x-logobar, .x-navbar, .x-topbar  {
    background-color: transparent !important;
    box-shadow: none;
    border: 0;

}

Would really appreciate your help!

Thanks, Petra

[prakash_s]

Hello @Upbeater,

Thanks for writing to us.

I checked your site it seems that you have already made the header transparent. To make the mobile menu transparent you need to add this custom CSS code under X—>Theme Options—>CSS.

@media(max-width:978.98px){
.x-btn-navbar.collapsed:hover {
    background-color: transparent;
    box-shadow: none;
}
.x-btn-navbar.collapsed {
    background-color: transparent;
    box-shadow: none;
}
}

To add padding on the Logo section please add this custom CSS code

a.x-brand.img {
    padding-top: 10px;
    padding-bottom: 10px;
}

Please free to change the padding value as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[Upbeater]

Hi,

Thanks a lot for writing back and providing the option to make the Mobile Navbar transparent and adding padding.

In terms of making the navbar transparent, yes I managed to do it on the home page; upbeater.com.
However, even though the CSS code is added to global settings under X—>Theme Options—>CSS, it only works for the home page (and not any other pages like for example: https://www.upbeater.com/society/).
So my question was;

1. Why it’s not working to toggle the transparent nav bar option?
2. How I can make sure the navbar is transparent on all pages?

Thanks,
Petra @ Upbeater

[ruenel]

Hi Petra,

If you look closely at your custom CSS code, it is evident that it will only work for the homepage. If you want it to work globally, you need to remove the .home selector. Therefore, the final code will be:

/* transparent navbar */

.masthead .x-navbar {
   background-color: transparent ;
}

Also, take note that I have changed the way to comment in CSS. The correct one should always be like this:

/* Your comment here */

Kindly let us know how it goes.

[Upbeater]

Thanks a lot for this, it helped a lot as I had missed that.

Cheers,

[marc_a]

Hi @Upbeater,

You’re welcome and it’s our pleasure to help you. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.