[Support request] primary navigation custom design for home page

[Carlo]

Hi there,

I have GP Premium + GB premium
I’d like to have:
1) in home page a primary navigation with no background, just letters over the hero image (a video in my case).
Like in the realtor theme in the GP Library.

2) And a different primary navigation style for the rest of pages, more classic, with, above, a horizontal white background bar and the menu letters of a different color than in home page.

In the past, few years ago, in GP I used to do that with css as in the old documentation but now I’d like to be certain I’ll use the “up to date” and simplest way to do that combining the latest GP and GB features.

How can I do that?

Thank you. All the best

[David]

Hi there,

in the Customizer set the layout of your menu, and assign the color styles that you require for your Point #2.

Then you can create a new Header Element in Appearance > Elements, and follow the instructions here to create the transparent / merged navigation for your Frontpage

https://docs.generatepress.com/article/transparent-header-and-navigation/

[Carlo]

Thanks David, it works 🙂

What’s the best way to control the logo size there?

Css or is there any GP setting?

[David]

Can i see the site so i can advise the best method ?

[Carlo]

Sure, please see in the private information window.

I have just noticed that the sticky navigation bar appears correctly when scrolling down but it does not disappear when I go back on top of the page.
Is this correct?

About the size of the logo, so far I have solved uploading an image of the right height (almost same as the “standard” navigation bar of the website. Don’t know if this solution is enough.

[David]

The logo, in Customizing > Layout > Sticky Navigation you can edit the Menu Item Height, which also defines the size of the sticky logo.

I am not seeing the issue with the nav bar, try clearing browser caches.

[Carlo]

Thank you David,

About the logo height, I mean the negative one over the video when loading the page, not the one in the sticky navigation bar.
Do you mean the same?

About the sticky bar, I have tried deleting the browser cache and also with another browser but still the same, it appears wehn scrolling down but it does not disappear when scrolling back on top.
Reloading the page obviously make it disappear.

I’m on a laptop.
I’ll dig deeper when I can test it on another computer.

[David]

The logo when its NOT sticky, you can set its height in the Customizer > Site Identity.

The sticky bar not disappearing, is it the same when you’re logged out of the site ?

[Author]

Posts