[Resolved] Order of the header/navigation elements

[Top-Fit-Gesund]

Hello,
the header of http://www.floraglueck.de contains the correct elements (logo, search, menu), but in the wrong order. I would like this:
* centered logo
* Left menu
* Search right
Thanks in advance,
Rainer

[David]

Hi there,

add this CSS to your Site:

#mobile-header {
    position: relative;
}
.navigation-branding {
    position: absolute;
    margin-left: 0 !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%); 
}

#mobile-header .menu-toggle {
    order: -1;
    margin-right: auto;
}

[Top-Fit-Gesund]

Thanks a lot! It works! Now comes the challenge of understanding why… Thanks David!

[David]

#mobile-header is the parent container – we make this relatively positioned.
That way when we position the navigation-branding absolutely it will be relative to the #mobile-header.
top: 0; Keeps the logo up top.
left: 50%; pushes the logo half way across the mobile-header.
transform: translateX(-50%); this centers the logo. Without this the logo will sit right of center.

GP uses CSS Flexbox inside the #mobile-header which gives us the awesome order property.
Elements inside the flexbox – such as our menu toggle and search icon have an implied order based upon the HTML which in our case is Search 1st then Menu Toggle 2nd.

So we give the Menu Toggle an Order of -1 to make it first. Then add some automatic margin-right to it to push the search icon across the screen.

Hope that helps 🙂

[Author]

Posts