[Resolved] menu and header transparant

[Ewout]

Hiya,

On my website http://tyker.com/concept

I want all the background for the headers and menu’s on all devices to be RGBA(255,255,255,0.75) (White transparent)

How do I achieve this?

Kind regards,

Ewout

[David]

Hi there,

you can edit the Customizer > Colors > Primary Navigation or Off-canvas Panel and set the background colors there

[Ewout]

Hi David,

added it to primary and Off-canvas but this didn’t work out….

Please your insight on this.

Kind regards,

Ewout

[Leo]

Do you want the transparent navigation style to be global or only when header element merge is used?

[Ewout]

Hiya,

I have the main menu for desktop merged but for mobile devices not. Do I have to delete the merge element?

What I would like to accomplish is that all the menu’s(desktop tablet mobile) have a transparent background of rgb(255,255,255,0.7)

I hope it makes sense:)

Kind regards,

Ewout

[Ewout]

And also the headers, you can see now that there is an transparant background in the heaer but behinde the menun items on desktop there is als another layer of color.

kind regards,
Ewout

[Leo]

Currently the header color is set to rgba(255,255,255,0.8) in the header element and you have added the CSS below which is setting the navigation color:

.inside-navigation {
	background-color: rgba(255,255,255,0.8)
}

You can’t have rgba(255,255,255,0.7) on top of rgba(255,255,255,0.8) as they are both transparent.

I hope that makes sense.

[Ewout]

Yes thank you, that helped to put away one layer.

Now i only have a different layer right behind the menu items, how can that become the same as the rest?

Kind regards,

Ewout

[Leo]

If you want the navigation color to be the same as header color, then try setting the navigation color to transparent by removing the hex code.

[Ewout]

Yes that works, but than my sticky and mobile nav bar have no rgb(255,255,255,0.7)…

Any suggestion on that?

Kind regards,

Ewout

[Ewout]

I can see that in the top of the page there is a rgb(255,255,255,0.7) layer, is this because of the element I made for merging the header to be transparent?

If so, can I remove that and make just the headers and menu’s background rgb(255,255,255,0.7)?

Kind regards,

Ewout

[Leo]

That case then set the option in the customizer to be rgb(255,255,255,0.7) then transparent in the header element navigation color setting:
https://docs.generatepress.com/article/header-element-overview/#navigation-colors

Let me know if this helps 🙂

[Ewout]

Thanks for the answer.

I just made it work with some custom css, now its working fine.

Thanks for your time and efforts!

Kind regards,

Ewout

[Leo]

No problem 🙂

[Author]

Posts