[Resolved] Re-order elements in header?

[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!

[Leo]

Hi there,

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

You can use the private information field.

Let me know 🙂

[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

[Leo]

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 🙂

[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.

[David]

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

[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?

[David]

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.

[Speedy]

Ha ha – BINGO!

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

Many thanks for your help 🙂

[David]

Awesome – glad to be of help!

[Author]

Posts