[Support request] Is it possible to create semi transparent header without CSS

[Rafael]

Hi, I have the lastest version of GP premium and want to know if is possible to create a semi transparent header (including main menu) without touching CSS.

The new GP premium add options of transparency in the “page headers” option as well as the colors options.

What of those I need to edit in order to do it the better way possible?

Thanks

[Leo]

Hi there,

I’m not quite sure what you mean?

What are you trying to achieve? Can you provide an example?

Thanks!

[Rafael]

This is the example that im working on:
http://defiant-batfish.w5.poopy.life/

But I want totally transparent background in the main nav and the logo in the begining and when start scrolling I want the sticky navigation and the background to be semitransparent but with an uniform color in all the weight.

Now as you can see I am messing colors with the css options, but I want to know in case if possible if gp premium with the new options allow that without css.

In case it doesn’t what css code need to use and what settings need to put in the customize option.

Thanks

[Leo]

So the only issue right now is the navigation background is not fully transparent?

If so you you can set it in page header advanced settings: https://docs.generatepress.com/article/merging-header-navigation-content/#merging-our-header

[Rafael]

Hi Leo,

this is the first issue.

The second issue is that, as you see, when you are scrolling there are 2 semi transparents colors, the first one white semitransparent at the left of the logo and at the right of “contact” and the main one that is semitransparent black.

I just want to know how to use all the options in the page header advanced settings and in the customizer from the theme to be able to change that. Or if I need to leave all this as default and threat that completely using CSS.

Thanks

[Leo]

So you want the navigation to be full width when sticky?

Try this:

.main-navigation.navigation-stick .inside-navigation.grid-container {
    max-width: 100%;
}

[Author]

Posts