[Resolved] Order of the header/navigation elements

Home Forums Support Order of the header/navigation elements

This topic contains 3 replies, has 2 voices, and was last updated by  David 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1247502

    Rainer

    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

    #1247809

    David Customer Support

    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;
    }
    #1248125

    Rainer

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

    #1248142

    David Customer Support

    #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 🙂

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.