Archived topic
Want Primary Navigation Bar To Be: Hamburger (l), Logo (center), Search (r)
4 replies · Started by Patrick on March 18, 2023
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 ;-)
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.
Hi there,
add this CSS to your site:
#site-navigation .menu-toggle {
order: -1;
margin-right: auto;
}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?
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.
