Docs

[kisschicken]

I’d like to create a slightly transparent navigation bar on our website: https://www.pristine.io. I’d only want the transparency to work on desktop sizes.

I’d also like to remove the white background from the nav bar. I removed the masthead with CSS, but it broke the blog on mobile.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (min-width:980px) {
    .x-navbar {
        background-color: rgba(29, 47, 81, 0.5);
    }

    .x-main.full {
        top: -71px;
    }
}

I can’t seem to find the white background you were referring to.

Let us know how that goes. Hope this helps – thanks!

[kisschicken]

Great! Thank you.

[kisschicken]

Actually, this created another problem.

This CSS…
.x-main.full {
top: -71px;
}
}

… removed the white bar at the top but pushed the whole website up 71 pixels. Now there is a 71 pixel gap above the footer.

The screenshot shows that white background I’m talking about.

[Rupok]

Hi there,

Thanks for writing back. It seems the code is correct and shouldn’t cause the issue as your screenshot. Can you keep the code on your site or provide us the login credentials in a private reply so that we can check?

Cheers!

[kisschicken]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for updating the thread! Upon checking your site, Unfortunately, we are unable to see or replicate your issue on our end. Would you have happened to have solved your issue already? Your site is functioning properly on our end. This maybe browser version specific. Please update us with more info on how to replicate the issue if it is still present – thanks!

[kisschicken]

Hey John,

Yeah, the navigation works fine but the solution causes problems with the footer.

That CSS you sent to move x.main.full up 71px moves the whole page up. That leaves a 71px gap above the footer (screenshot attached. That x.main.full, I presume, is the white background that shows up behind the navigation without your CSS code.

Does that make sense?

[Jade]

Hi there,

Please try this:

@media (min-width:980px) {
    .x-navbar {
        background-color: rgba(29, 47, 81, 0.5);
    }

    .x-main.full {
        margin-top: -71px;
    }
}

Hope this helps.

[kisschicken]

Thank you! We’re almost there.

So this fixes the homepage but breaks the blog. The blog masthead has been moved up 71px. You can see on this page: https://pristineio.staging.wpengine.com/blog/

[Rupok]

Hi there,

Thanks for updating. In that case, you can update the code a bit :

@media (min-width:980px) {
    .x-navbar {
        background-color: rgba(29, 47, 81, 0.5);
    }

    .x-main.full {
        margin-top: -71px;
    }
    .blog .x-main.full {
        margin-top: 0;
     }
}

Or if you just want this for homepage, then use this instead :

@media (min-width:980px) {
    .x-navbar {
        background-color: rgba(29, 47, 81, 0.5);
    }

    .home .x-main.full {
        margin-top: -71px;
    }
}

Hope this helps.

Cheers!

[kisschicken]

So that fixed the blog and the homepage works, but the internal pages still have half a white background (screenshot attached). That can be fixed by changing the 71px to something bigger like 110px, but it affects pages that don’t use a header, like our landing pages. All of those pages get pulled up by 110px.

I’m willing to accept at this point that this may not be able to be done seamlessly so if you want to chalk this up as beyond the limit of xtheme support, I’d understand.

[Jade]

Hi there,

Please try to add this code:

.page .x-main.full {
    margin-top: 0;
}

Hope this helps.

[kisschicken]

It does. Everything works except the homepage. I think it’s related to Slider Revolution. It’s adding some type of white background on the homepage navigation. You can see it here: https://pristineio.staging.wpengine.com/

Any idea how to get rid of it?

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.home div#cs-content {
    margin-top: -71px;
}

Hope this helps – thanks!

[Author]

Posts