Docs

[pmason]

Hi there.

Thanks for a fabulous theme and great support. I use nothing else now for all my WordPress websites.

I have a problem with adding opacity to the top bar. It works fine until I add content to the top bar and then the background renders back into solid white. Here is the CSS I am currently using.

.x-navbar, .x-topbar {background-color:rgba(255, 255, 255, .70); border:none;}
.x-topbar .p-info {float:right;}
.topbarcallout {font-size:160%;}
.x-topbar a {color: #8e47ad!important;}
.x-topbar .x-container {max-width:100%!important;}

Could you advise how to retain the opacity while still adding content to the top bar please? Thank you.

I’ll post access details next.

[pmason]

This reply has been marked as private.

[Nico]

Hi There,

THanks for writing in.

Try adding this in your Customizer > Custom > CSS.

.x-navbar, .x-topbar{
    min-height: 0l
    height: 0;
}

Let us know how it goes.

Thanks.

[pmason]

Hi,

Sorry that doesn’t seem to have done anything.

Are you sure you meant to write “min-height: 0l”?

The navbar isn’t the problem, it’s the top bar that isn’t retaining it’s opacity when I add content via the customizer. If I remove the content, it displays exactly how I want it to.

Any suggestions?

[Joao]

Hi There,

Please add the following CSS code to Appereance Customizer Custom CSS or your Style.css on the Child Theme

.x-topbar .p-info, .x-topbar .p-info a {
background: none;
border-color: transparent;
}

Hope that helps

Joao

[pmason]

No, still not resolving the problem. Looking in firebug, I can’t see any other css that’s causing an issue, but something is preventing the background from showing through the full height of the topbar. Anything else I can try? Thanks.

[Joao]

Hi,

Please clean your browser and test it again.

On my end the topbar has opacity, but when resized the solid background appearing behind the content.

Maybe try this instead:

.x-topbar, .x-topbar .p-info, .x-topbar .p-info a {
background: none !important;
border-color: transparent !important;
}

If that does not work check for some CSS Syntax errors that might be preventing this CSS to work

Let us know how it goes

Joao

[pmason]

Hi. Managed to find a solution that involves swapping

margin-top:-260px; on my slider section for

position:relative;
top:-260px

I still can’t figure out why that made a difference! Thanks for you suggestions anyway.

[Jade]

You’re welcome. Glad you’re able to get it sorted. Cheers!

[Author]

Posts