[Resolved] Header – 3 column layout, 2 navigation areas

[Aaron]

I have a header I need to build and would like to keep it within GP (not Elementor).

Standard left aligned logo, a primary navigation area in the middle, and a 2ndary navigation (2 items and an icon) on the right.

On smaller screens, I need the primary (center) navigation to go hamburger, but the 2ndary navigation will remain the same as on desktop view.

Is this possible? Thanks.

[David]

Hi Aaron, i would probably use the Header Widget in place of the secondary nav, to avoid working round the mobile menu. Set the primary navigation to float right of the header and then we could use a bit of flex box to align and order:

.inside-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.header-widget {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

[Aaron]

Hi David – thanks for your help with this. I didn’t receive an email notification (my fault) so wasn’t aware this was answered.

Aaron

[David]

You’re welcome Aaron!

[Author]

Posts