[Resolved] Order of the header/navigation elements

Home Forums Support Order of the header/navigation elements

  • This topic has 3 replies, 2 voices, and was last updated 6 months ago by David.
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
    Staff
    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
    Staff
    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.