[Resolved] Want Primary Navigation Bar To Be: Hamburger (l), Logo (center), Search (r)

[Patrick]

I have searched the support forum, but it seems like all related topics are trying to do something much more complicated.

I want the nav bar to be as I listed in the title, for both desktop and mobile. I have set the mobile menu breakpoint to 2000 so that I always have a hamburger menu.

I just can’t get the 3 elements to align as desired.

I want my nav bar to be like: nichepursuits.com.

The site I am building is: https://spooned.io/cardano-tokens/

Thanks 😉

[Patrick]

In the alternative, I would be happy to have the menu drop down below the hamburger. Right now, it drops down below the logo which is on the opposite side of the page.

[David]

Hi there,

add this CSS to your site:

#site-navigation .menu-toggle {
    order: -1;
    margin-right: auto;
}

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

[Patrick]

Well, that worked perfectly … thank you!

Just so I understand, what is it doing … reordering one of the nav elements back one in the order?

[David]

So the Branding ( logo ), menu, hamburger and search icon are all child elements of the inside-navigation div. And that has display: flex applied to it to keep those elements in a row.

CSS Flex box has the order property that allows you to re-arrange flex children. If you consider that the implied order ot those child elements would start with 1, then 2 3 4 etc. We set one element to a - minus value it will position itself before the first one.

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

[Author]

Posts