[Resolved] header colours and logo size

[TWMA Support]

Hi

Ok so couple of things here…

I would like the header to be transparent before scroll. I have done this but cant seem to make the menu items background transparent before scroll as when you scroll the whole header is filled with the menu background colour. How do I have a transparent header and menu before scroll and a solid colour when header becomes sticky?

Also how do I set the logo to be the same size before and during scroll. When the header changes to sticky the logo shifts its left margin and reduces in size slightly (making it a bit blury). I have set the height to the same hight it was before you scroll but this doesnt seem to help.

[TWMA Support]

Sorry but the site is in under construction mode so you wont be able to view. Please let me know how to privately send details

[Leo]

Hi there,

– Are you using page header merging with navigation?

If so you can use the custom navigation colors: https://docs.generatepress.com/article/merging-the-page-header-site-header/#custom-navigation-colors

– Sounds like you just need this layout: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Let me know.

[TWMA Support]

Thanks the navigation as a header worked well.

The logo though looks fuzzy even if I increase the nav height to the sam or greater than the logos hight.

Thoughts?

[TWMA Support]

Also I Want the background of the menu/logo area to be transparent and only have a colour when you start to scroll

[Leo]

Can you send me access through Account Issue?
https://generatepress.com/contact/

Be sure to reference the topic URL.

[Leo]

Hmm I’m still not seeing the navigation as header method being implemented:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Next, instead of using sections with negative margin to merge the content and navigation, I would recommend our page header add-on which is designed to build a layout like that. Watch the video in the link below:
https://docs.generatepress.com/article/page-header-overview/

Then you can use custom navigation color: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

So that the scroll color will inherit from the customizer option.

[TWMA Support]

Thanks will give it a try in the morning.

In the meantime…

How do I make a section full screen but responsive. Meaning the section covers any screen size but only to the hight and width of the screen it is being viewed on…if that makes sense? just want to have the hero banner on the home page fill the screen on desktop but not have a lot of padding below so someone on a mobile has to scroll an age to get to the next section.

Thanks

[Leo]

Can you start another topic for a different question?

Thanks!

[TWMA Support]

all good on both counts…I think…thanks

[Leo]

No problem!

[Author]

Posts