[Resolved] Logo + 2 widgets

[Paul]

Hi,

Is there a tutorial at all for creating a header like this: https://learnosity.com/

thanks

GeneratePress 2.2.2

GP Premium 1.7.7

[Leo]

Hi there,

I would recommend using this method:
https://docs.generatepress.com/article/navigation-as-a-header/

You can use menu-item-float-right class to move certain items to the right:
https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

This should help for buttons:
https://docs.generatepress.com/article/adding-buttons-navigation/

Shouldn’t need any widgets 🙂

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

[Paul]

Thanks Leo but that doesn’t really work.
I’m fine with buttons it’s getting the menu to sit next to the logo i’m struggling with.

[David]

Hi there,

could you share a link to your Site? You can edit your original topic and use the Site URL field for privacy.

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

[Paul]

It’s not online right now but I’ve updated the OP with a link to a demo site that has the same header layout.

[David]

So you would need to set the Nav as the header as per Leo’s instructions.
Then add this CSS:

@media (min-width: 768px) {
    .main-navigation ul {
        display: flex;
    }
    .main-navigation li.force-right {
        margin-left: auto;
    }
}

The first menu item you want sitting to the right ( e.g in the Learnosity site the Pricing item ) needs a CSS Class of force-right

This will keep it and any subsequent menu items and the nav search to the right and all others will be pushed over to the left.

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

[Paul]

That’s absolutely perfect David, thank you.
And thank you Leo for the initial info.

I’ll be using this alot now.

I’d also like in future to create a similar layout but with the main nav centered, with a contact button to the right. So similar to this one you’ve helped me with but nav central instead of next to the logo. Would that be the same code but replacing “flex” in the css?

Once I have that figured out, with all the built in options and starter sites I think i’ve got every header layout I could ever need.

I love GP.

[David]

Awesome 🙂
So using that above code you should be able to apply the same force-right class to the first menu item.

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

[Paul]

Works perfectly, thanks very much.

[David]

Glad to be of help.

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

[Author]

Posts