Semi Transparent Menu

main1event · February 22, 2019, 3:50am

What CSS would I use to create a semi translucent menu background on my site. Right now its currently transparent, but no matter what colors I choose for my menu text, they just dont stand out from the background. www.djbobcarpenter.com

ruenel · February 22, 2019, 4:01am

Hello Bob,

Thanks for writing in!

Did you enable the navbar transparency in X > Theme Options > Integrity? To resolve your issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    background-color: rgba(0,0,0,0.5);
}

We would loved to know if this has work for you. Thank you.

main1event · February 22, 2019, 4:15am

I placed that code into the global CSS and its not working. Yes, I have the transparency enabled. I did try to disable it to see if the code worked and same result.

friech · February 22, 2019, 4:46am

Hi Bob,

Try adding the !important statement.

.x-navbar {
    background-color: rgba(0,0,0,0.5) !important;
}

If that did not work still, please CLEAR and deactivate your caching, minifier and optimizer plugins (including CloudFlare) for a while, so we can take a closer look, on what is happening in there.

And another thing, there seems to be a syntax error somewhere on your Theme Options > CSS, please copy all your custom CSS and check it here, and address the errors (if any).

Thanks,

main1event · February 22, 2019, 2:57pm

Its still not working for me. I have a cacheing plugin that clears the cache. Here is all the CSS that I have in Global right now
.single-post .entry-header {
display: none !important;
}

@media (min-width: 980px) {
.masthead.masthead-inline {
position: absolute;
top: 0;
width: 100%;
}

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}

.x-navbar {
position: absolute;
right: 35px;
top: 10px;
width: 80%;
}

.x-navbar-inner {
}

.x-navbar .mobile .x-nav {
background-color: #ddd;
}
}

.x-navbar {
border-bottom: none !important;
}
@media screen and (max-width: 51em) {
body.custom-background {
background-image: none;
}
.x-navbar {
background-color: rgba(0,0,0,0.5) !important;
}
@media (min-width: 980px) { .masthead.masthead-inline { position: absolute; top: 0; width: 100%; } }

rad · February 22, 2019, 4:21pm

Hi Bob,

The @media block should be properly closed. Example

@media (min-width: 980px) {
.masthead.masthead-inline {
position: absolute;
top: 0;
width: 100%;
}

} /* this is missing */

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}

Please fix them first, and I see multiple of that issue. Any CSS added below it will not work.

Thanks!

main1event · February 22, 2019, 5:00pm

Okay the transparency works now but the menu is not at the very top of the window. Also the transparency doesnt go full width of the screen. Here is the updated CSS in the Global

.single-post .entry-header {
display: none !important;
}

@media (min-width: 980px) {
.masthead.masthead-inline {
position: absolute;
top: 0;
width: 100%;
}
}

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}
}

.x-navbar {
position: absolute;
right: 35px;
top: 10px;
width: 80%;
}

.x-navbar-inner {
}

.x-navbar {
border-bottom: none !important;
}
@media screen and (max-width: 51em) {
body.custom-background {
background-image: none;
}
}
.x-navbar {
background-color: rgba(0,0,0,0.5) !important;
}

main1event · February 22, 2019, 5:03pm

I also just viewed this on the mobile end and the semi transparent background is there too. Anyway to eliminate the semi transparency when viewed on mobile devices. Its not needed there because of the drop down menu button.

nabeel · February 22, 2019, 9:36pm

Hi again,

You can simply find and remove the following code from your custom CSS:

.x-navbar {
    position: absolute;
    right: 35px;
    top: 10px;
    width: 80%;
}
@media only screen and (max-width: 600px) {
.x-navbar {
    position: absolute;
    right: 35px;
    top: 10px;
    width: 80%;
}
}

This will remove the transparency from your mobile devices and bring back the menu to the top of the window with full width.

Hope this helps!

main1event · February 22, 2019, 10:36pm

This code was not in the code I posted above. I did remove the .x-navbar code. It does not seem to be working. I still have a translucent menu background on mobile. Here is what I have right now.

.single-post .entry-header {
display: none !important;
}

@media (min-width: 980px) {
.masthead.masthead-inline {
position: absolute;
top: 0;
width: 100%;
}
}

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}
}

.x-navbar-inner {
}

.x-navbar {
border-bottom: none !important;
}
@media screen and (max-width: 51em) {
body.custom-background {
background-image: none;
}
}
.x-navbar {
background-color: rgba(0,0,0,0.5);
}

ruenel · February 23, 2019, 1:19am

Hello Bob,

Please remove this code:

@media (min-width: 980px) {
.masthead.masthead-inline {
position: absolute;
top: 0;
width: 100%;
}
}

And simply update it to this:

@media (min-width: 980px) {
  .masthead.masthead-inline {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }
}

Meanwhile, if you want to have a sticky navbar, please go to X > Theme Options > Header > Navbar and set the Navbar Position as “Fixed Top”.

We would loved to know if this has work for you. Thank you.

main1event · February 23, 2019, 4:22am

This is still not behaving the way I want it but first things first. The translucent background is still showing up on my phone. How Do I remove that? Here is what I have with the changes in the CSS that you provided me.

.single-post .entry-header {
display: none !important;
}

@media (min-width: 980px) {
.masthead.masthead-inline {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
}

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}
}

.x-navbar-inner {
}

.x-navbar {
border-bottom: none !important;
}
@media screen and (max-width: 51em) {
body.custom-background {
background-image: none;
}
}
.x-navbar {
background-color: rgba(0,0,0,0.5);
}

friech · February 23, 2019, 7:47am

Hi There,

But that is the CSS rule that is causing the translucent header on mobile (600px and below). Unfortunately we can pinpoint where this code is added because your site is minified.

Please CLEAR and deactivate your caching, minifier and optimizer plugins (including WP Rocket) for a while, so we can take a closer look.

And if you don’t mind, please provide us login credentials in a secure note (we might need it).

Thanks,

main1event · February 23, 2019, 2:21pm

I have deactivated WP Rocket.

thai · February 23, 2019, 3:51pm

Hi Bob,

Could you please try adding this custom CSS?

@media (max-width: 767px){
    .x-navbar {
        background: #000;
    }
}

Hope it helps

main1event · February 23, 2019, 3:58pm

I added that CSS to Global and it didnt do anything. Here is what I have now in the global settings. .single-post .entry-header {
display: none !important;
}

@media (min-width: 980px) {
.masthead.masthead-inline {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
}

@media only screen and (max-width: 600px) {
.x-brand.text {
display: none;
}
}

.x-navbar-inner {
}

.x-navbar {
border-bottom: none !important;
}
@media screen and (max-width: 51em) {
body.custom-background {
background-image: none;
}
}
.x-navbar {
background-color: rgba(0,0,0,0.5);
}

@media (max-width: 767px){
.x-navbar {
background: #000;
}
}

rad · February 23, 2019, 7:06pm

Hi Bob,

I just checked and it’s working, it’s not solid black color without transparency on mobile view. Could you try clearing your mobile browser’s cache and test it again?

Thanks!

system · March 5, 2019, 7:07pm

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