[Resolved] Re-order elements in header?

Home Forums Support Re-order elements in header?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1495799
    Speedy

    Hi there – been using generatepress for a while now and loving it. I normally use some extra 3rd party plugins in our layouts such as the maxmenu, which I then place in hooks etc. which works fine. But I’m now experimenting and trying to do away with as many extra plugins as possible.

    A common layout we need to build is a centered, non-merged header containing a stacked logo followed by a secondary nav menu with contact details etc and a full width main nav menu under that. So 3 elements all centred and stacked one after the other within the header.

    But the default Generatepress layout seems to want me start with the sec. nav, followed by the site logo, followed by the main nav?

    The only positioning options I can see for the 2 nav menus is to float them left or right of the logo, or to have them outside the header, either above or below? Is this correct? So I guess what I’m looking for is either a couple of extra options to position the nav menus such as above or below the logo.

    Or how to alter the default order of these elements??

    Cheers!

    #1495961
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field.

    Let me know πŸ™‚

    #1495994
    Speedy

    Sure – here you go.
    It’s really nothing special. I’ve used a bit of new css to remove the float from the main nav to centre that.
    But all I really want is to run all within the header
    Logo
    Secondary Nav
    Main Nav

    cheers

    #1496270
    Leo
    Staff
    Customer Support

    So just to confirm, you want both primary navigation and secondary navigation to position below header but secondary navigation before the primary navigation?

    Let me know πŸ™‚

    #1496412
    Speedy

    Sorry if I wasn’t clear before..

    Not really. I want everything INSIDE the header, not below, but I it suppose it depends what you call “the header”.

    In my mind, the header is the main container at the top of the pages. In generatepress it’s called “site-header” and then “inside-header”.

    All I’m asking is how to arrange 3 standard elements: “site-logo”, “secondary-navigation” and “main-navigation” centred in a column, in that order, inside the header?

    At the moment on my site they are arranged in the following (default?) order:
    1) “secondary navigation” – floated right (which I want to place underneath the logo).

    2) “site-logo”

    3) “main-navigation” – again floated right but float cleared in custom css so it takes the full width of the header.

    Ideally I’d like 2 more options to display the main and sec nav elements. As well as float left or right, I want to see above or below the logo, not the header.

    I would also like to understand exactly how these various elements are called and arranged in the order they are, so that I could edit that code and arrange anything in exactly what order and position I like?

    Or how can I add these elements as hooks so I can build my own layout / header?

    Thanks for your help.

    #1496893
    David
    Staff
    Customer Support

    Hi there,

    theres a few ways around this. If you’re using GP 3.0.
    The simplest would probably be to set the two navigations to Float Right – so they are inside the site-header.

    Then its simply a case of some CSS like so:

    .inside-header,
    .multi-navigation-wrapper {
        flex-direction: column;
        margin: auto;
    }
    
    .secondary-nav-float-right .secondary-navigation {
        margin-left: 0;
    }
    
    .main-navigation {
        order: 20;
    }
    
    .site-logo {
        margin-bottom: 1em;
    }
    #1496947
    Speedy

    Thanks David. I’ve tried your suggestion but think I must be doing something wrong, as I can’t see the “multi-navigation-wrapper” in the code inspector.. any chance you could take a quick look for me?

    #1497007
    David
    Staff
    Customer Support

    Aah sorry my bad – if you’re using GP 3.0 you need to select the Customizer > General >> Structure to Flexbox.

    If you don’t want to use Flex then let me know.

    #1497028
    Speedy

    Ha ha – BINGO!

    Had wondered, all fuss about new flexbox layouts and couldn’t see any difference LOL!

    Many thanks for your help πŸ™‚

    #1497031
    David
    Staff
    Customer Support

    Awesome – glad to be of help!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.