[Support request] Making my header transparent behind the logo and menu so I can see my background

[James]

How do I make my header transparent, so I can see my background image?

[Elvin]

Hi there,

Can you link us to the site in question? So we could check and give the most fitting advice to apply to your site.

You can use the private information text field to provide the site details. 🙂

[James]

gratefulguitarsluthiery.siterubix.com

[Elvin]

Thanks.

You seem to have background set on Appearance > Customize > Background Images > Primary navigation.

Try removing it.

Also, try going to Appearance > Customize > Colors > Primary navigation and make sure you remove the color so it’s fully transparent as shown here:
https://share.getcloudapp.com/rRukKd4X

and here: https://share.getcloudapp.com/nOulr4qv

[James]

Thanks Elvin! That made my menu background transparent, but I want my whole header background to be transparent, and I want it to be be visible when scrolling down the page. An example of what I want is https://acerguitars.com/. Again, thanks!

[James]

Let me clarify that last post. What I meant by visible was not the background but the logo and menu as you scroll down as it is at https://acerguitars.com/.

[David]

Hi there,

do the Following:

1. Customizer > Layout > Header and Check Navigation as Header.
2. Remove the Background Image from the Primary Navigation.
3. Set Colors > Primary Navigation for the colors you want displayed when the Navigation is Sticky.
4. Create a new Header Element in Dashboard > Appearance > Elements:

https://docs.generatepress.com/article/header-element-overview/

On the elements Site Header Tab set it to Merge with Content. Then check the Navigation colors box and change your nav colors to a transparent background.

[James]

David,

Thanks for the help. So far everything works out on the mobile view, but my logo is too far to the right, and it disappears when I scroll down. Any ideas?

Jim

[Elvin]

Hi James,

Make sure you’re Menu Item height set on Appearance > Customize > Layout > Sticky Navigation is equal to the Menu Item height you’ve set on Appearance > Customize > Layout > Primary Navigation.

[James]

That worked awesome! Now, I can’t remember what I did that set my logo that positioned it so far to the right. Thank you so much!

[Leo]

Have you resolved this?

The logo is in the center and not to the right when I just checked:
https://www.screencast.com/t/V65jmdVYI3u

[James]

I almost have this the way I want it. I would like to have the header background look like the transparent tan all the time, not only when scrolling down. The new domain name is http://gratfulguitarsluthiery.com/

[Elvin]

Hi there,

The header is actually transparent already. The issue here is it overlays an empty space rather than the hero image, making it look like it’s not transparent.

Try adding this CSS so the header overlays on top of the hero.

nav#site-navigation {
    position: fixed;
    width: 100%;
}

This is the intended effect of this CSS: https://share.getcloudapp.com/d5u1lGGz

[James]

I changed my logo, and now the new logo only shows when I scroll down. In the mobile version, the header is no longer sticky, and in chrome, it is not transparent.

[James]

I fixed the logo and sticky issues. The chrome issue that the mobile header is not transparent at top is still and issue.

[Author]

Posts