[Support request] Logo to the left and menu next to it to the right

[Kostas]

hi,
how can that be so difficult to have the logo to the left corner and the menu next to it and both are on top of a hero image?
Can you please advise in steps?

[David]

Hi there,

If you want the Navigation aligned left then:

1. Customizer > Layout > Header and Enable the Navigation as Header
2. Customizer > Layout > Primary Navigation – set the Alignment left.

3. Then use a Header Element to Merge the Navigation with the top of your content:

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

[Kostas]

hi,
thanks for the info.
what I want is the logο on the top left corner and theν the menu sitting right next to it on its right hand few pixels away, not on the far right top corner.
If i remember well i did this using a combination of hooks last time, but i was wondering if there is some more official/out of the box method.
thanks

[Fernando]

Hi Kostas,

I see. Thank you for clarifying.

If you have to Primary Navigation location set to float right, can you try adding this CSS in Appearance > Customize > Additional CSS?:

nav#site-navigation {
    margin-left: 20px !important;
}

This overrides the margin-left set, and moves the navigation nearer the logo.

You may replace 20px with your preferred value.

Kindly let us know how it goes.

[Kostas]

ok this worked thanks!

[Kostas]

hi again,
please advise the best method to add text and buttons on top of my hero image section now.
I would like to use the block editor to style this layout as i wish.
I suppose i would have to create a Block hook and place it on top of my hero image right?
regards

[David]

You can use a Block Element – Page Hero:

https://docs.generatepress.com/article/block-element-page-hero/

When you set the Element Type to: Page Hero, it will provide a list of Templates, one of which has content on top of the image.

[Kostas]

ok thnaks,
however now the hero image goes below the navigation. I need the navigation on top of the hero image via transparency.
I know i will find it at some point but i would like you to provide the official way in order to keep my notes and fix this workflow 🙂
thanks

[David]

See step 3 here:

https://generatepress.com/forums/topic/logo-to-the-left-and-menu-next-to-it-to-the-right/#post-2273688

That Header Element you will create just to Merge the Site Header, and you can set its Display Rules to the Entire Site or to match the specific pages you want it applied to, including those with your Block Element Page Hero.

[Kostas]

ok David this worked thanks so much,
i need to study this workflow it was not so straight forward for me 🙂
regards

[David]

Glad to be of help.

[Author]

Posts