-
When header merge and sticky header are enabled, the sticky header is transparent. How can we make that a solid color?
Thanks!
-
Hi there,
Under the Header Element > Site Header settings, you can set the Header Background color.
https://postimg.cc/v1P2qzBT -
Yes but that makes the header a solid colour. I only want the colour to show for the sticky header. The header should remain transparent.
-
Okay, in that case, keep the Header Background setting on the Element transparent.
Now go to Customizer > Colors > Primary Navigation and set the Background color to the color that you want it to be in the sticky state.
-
Thanks for the reply but that doesn’t work either. That option adds colour to the background of the the navigation only.
I’m talking about the whole sticky header. Should be transparent when first loading the page but on scrolling down should change to a solid colour.
-
Hi there,
can you share a link to where we can see your sticky header, as the Theme only does sticky nav.
-
Added as private info
-
To recap on both tasks.
What I’m trying to achieve is
1. I have a transparent header but when scrolling I want the header background colour to be a solid colour.
2. On mobile, the header merge isn’t working. As per the other task after following Alvind’s instructions to enable Mobile header (below), the background colour for the header on mobile is now white (previously it was adhering to the customiser colour). The design/function is the same though.“Go to Customizer > Layout > Header, and set the Mobile Header setting at the bottom to Yes if you haven’t.”
Thanks in advance.
-
Let’s try to solve one thing at a time.
1. I have a transparent header but when scrolling I want the header background colour to be a solid colour.
Since you are using a merged header element, the transparent color should be set within the element itself highlighted in the screenshot here:
https://docs.generatepress.com/article/transparent-header-and-navigation/Then the solid color can be chosen in the customizer.
Please watch the video is this is unclear.
Let me know when this is sorted 🙂
-
Thanks, yes that makes sense. I have the site configured as per the instructions above.
However, because the color is selected from the primary navigation color (I would have thought it comes from the header background colour), that means I need to have a colour chosend for primary navigation. However, I want the primary navigation to remain transparent and the sticky header only to be the solid color.
Is there a way to achieve this through custom CSS?
-
Hi there,
the Sticky Navigation uses the Navigation as a Header. so it will attract the color your set in the Customizer > Colors > Primary Navigation -> Background.
Can you set that color to the solid color your require.
Then activate the sticky nav.
Then let us know so we can see the issue. -
Hi there, thanks for the reply.
The site is actually live now so I’ve taken a screenshot showing the issue and linked it in the private info. You can see that the navigation has a solid colour bechind the menu item. The sticky navigation background colour is correct as you can see in the second screenshot but the issue is the solid colour in the navigation. We need that to be transparent but at the same time have the sticky header as a solid colour.
-
Hi, just following up on this one. Any further thoughts?
Thanks!
-
Hi there, sorry for the delay. Your topic slipped from our system.
I’m not quite sure I understand what you mean on this part. appreciate if you could explain further:
..the issue is the solid colour in the navigation. We need that to be transparent but at the same time have the sticky header as a solid colour.
-
Well as per the first of the screenshots added in private chat, the menu item has a solid background colour (beige). This is the colour that displays when I set a solid colour for the primary navigation background (menu item) in the customiser. This is the same background colour of the sticky header as you guys have stated.
What I want to achieve is that the menu item has a transparent background instead of a solid colour (third link) whilst at the same time the sticky header background should be the solid colour.
-
Can you provide us a temporary admin login so we can take a closer look ?
- You must be logged in to reply to this topic.