[Resolved] Navigation same like GP site.

[Sergei]

Hello!
Interested how to make navigation + logo like GP site. I add image how i want to my site.
Thank you!

Image Here

GeneratePress 2.1.4

GP Premium 1.7.2

[Tom]

Hi there,

We just set the “Navigation Location” to “Float Right”: https://docs.generatepress.com/article/navigation-location/

Then just make sure your logo (Customize > Site Identity) is the same height as your menu items (Customize > Layout > Primary Navigation).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sergei]

Im done with that, but one more problem with inline. How to make logo and menu in the same line?

[Leo]

Make sure you follow Tom’s suggestion:

Then just make sure your logo (Customize > Site Identity) is the same height as your menu items (Customize > Layout > Primary Navigation).

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sergei]

Here is image how its looks like. But i really don’t know how to make it inline. With Customize>Layout>Primary Navigation>Menu Item Height can’t do what i want.

[Leo]

What if you set the menu item height to 82px like your logo height?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sergei]

Doesn’t work for me these 82px height.

[Leo]

Can you set it at 82px so I can see?

It’s still currently set at 60px.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sergei]

I set it now on Menu Item Height 82px.

[Leo]

It is now in the center of the logo image as you can see here:
https://www.screencast.com/t/KqkgFyOq2c0A

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sergei]

Hmm.. And how can i get it inline? Image Here

[Leo]

You’d have to do some manual adjustment.

Try setting the height back to something like 30px, then add this CSS and adjust the px number as you see fit:

@media (min-width: 769px) {
    .main-navigation {
        padding-top: 55px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sergei]

Okey! Big thanks.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts