[Support request] Setting Transparent Settings

[Damien]

Hi There

I want to be able to set my nav bar, footer and content area with a black background which is semi transparent, so that the background image can be kind of seen through it.

I know that there is no settings to do this within the customisation settings, but is there some CSS that will do this?

Many thanks

[Tom]

Hi there,

First you’ll want to remove any color values from these elements in the Customizer.

Then you should be able to do this:

.main-navigation,
.separate-containers .inside-article,
.one-container .container,
.sidebar .widget,
.site-footer {
    background: rgba(0, 0, 0, 0.5);
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Damien]

Hi There

Many thanks for that.

That all worked except that the background for the blog sidebar elements dont have the same transparent background.

Also, when accessing the website via a mobile, the backgrounds dont appear at on any of the areas as they do when accessing the site via a desktop.

Any ideas?

Many thanks for you help.

[Tom]

I just adjusted the CSS to include sidebar widgets.

Can you link me to your site so I can check on mobile?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts