Q20: Rearrange Navigation Items with Flex

I often see questions about how to rearrange navigation items in Divi. For instance, in the secondary menu the phone, email and social icons are all left aligned by default.

But maybe you want the social icons over to the right, or on the left and the phone and email over to the right. Whatever layout you want, there is likely a way to do it with flex, so in this Quick Snack I am going to go over a few of the more common layouts you might want to apply to your navigation items.

There are many more layouts you could try, but using these methods will give you the starting point you need to achieve what you want.

There is no demo for this as I would need to create 5 sites but there is a before and after for each effect.

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

Cooking time

Less than 5 minutes!

Preparation

These effects are all applied to the default header layout. Some may work with different layouts but you may need to use different classes. The idea is to give you an understanding of how to move things around with flex so you can apply it for your specific needs.

So for the prep, select the default header layout and add some elements to the Secondary Header as well, then you may also want to create a Secondary menu and add some items there as well as the Main menu.

Jump to the section you want

1. Swap the order of the secondary header contact info and menu
2. Justify contact info in the secondary header
3. Right align contact info in the secondary header
4. Contact info left and social links right in the secondary header
5. Split the main menu in two

Method

Swap the order of the secondary header contact info and menu

We will start with the default layout. So this is what you will see if you have both a primary and secondary menu applied, with a phone number and email in the secondary header, social links activated as well as a Secondary menu assigned.

Before:

And this is what we are going to achieve.

After:

The CSS:

Here is what we are doing:

First we set the secondary container header to flex so we can move our elements around. The space-between value of the justify-content property will make our elements align to the outer edges of the container.

Then we give our contact info (#et-info – phone, email and social links) and menu (#et-secondary-menu) an order value each. When ordering elements with flex we start with a value of 0, so we apply 0 to our contact elements, and 1 to our menu. The CSS contains the vendor prefixes needed to make this cross browser compatible (those values are correct even though they are different).

And it’s all wrapped up in a media query so it doesn’t apply to tablets and mobiles.

@media all and (min-width: 981px) {
    #top-header .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    #top-header #et-info {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
    #top-header #et-secondary-menu {
        -webkit-box-ordinal-group: 1;
        -ms-flex-order: 0;
        order: 0;
    }
}

Justify contact info in the secondary header

Next we are going to space out all our contact info elements evenly in the secondary header. So first you will want to remove the secondary menu.

Before:

And this is what we are going to achieve.

After:

The CSS:

Here is what we are doing:

We set our contact info container (#et-info) to 100% width and then display as flex. Then we add the space-between value to the justify-content property which will space our items evenly, whilst taking up the entire width of our container.

@media all and (min-width: 981px) {
    #top-header #et-info {
        width: 100%;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}

Right align contact info in the secondary header

Now lets right align our contact info. Again you will want to remove the secondary menu.

Before:

And this is what we are going to achieve.

After:

The CSS:

Here is what we are doing:

We set our contact info container (#et-info) to 100% width and then display as flex. Then we add the flex-end value to the justify-content property, which aligns the elements to right of the container.

@media all and (min-width: 981px) {
    #top-header #et-info {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

Contact info left and social links right in the secondary header

Now lets right align our contact info. Again you will want to remove the secondary menu.

Before:

And this is what we are going to achieve.

After:

The CSS:

Here is what we are doing:

We set our contact info container (#et-info) to 100% width and then display as flex. Then we add a left margin value of auto to our social icon container, this pulls our icons all the way to the right of the #et-info container.

@media all and (min-width: 981px) {
    #top-header #et-info {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #top-header #et-info .et-social-icons {
        margin-left: auto;
    }
}

Split the main menu in two

And finally, one for the main menu. Sometimes you may want to divide your menu into two sections, so you may want a call to action as the last menu item for example and have this look seperated from the rest of your menu items. It’s likely in this instance you won’t want the search feature enabled so go ahead and turn that off in the customiser.

Before:

And this is what we are going to achieve.

After:

The CSS:

Here is what we are doing:

First we need to make all our containers fullwidth, so we set the 3 containers relating to our menu to 100% width. Next, we set the menu container to display as flex, and finally we add a left margin value of auto to our last menu item to pull it all the way to the right of our container.

@media all and (min-width: 981px) {
    #et-top-navigation,
    #top-menu-nav,
    #top-menu {
        width: 100%;
    }
    #top-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #top-menu li:nth-child(5) {
        margin-left: auto;
    }
}

Now in the code above we have used the pseudo class :nth-child(5) to move our last menu item, when we could have just used :last-child or :last-of-type instead.

Why you say? Well I am glad you asked So that we can change that number value to move more items over to the right like this:

@media all and (min-width: 981px) {
    #et-top-navigation,
    #top-menu-nav,
    #top-menu {
        width: 100%;
    }
    #top-menu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    #top-menu li:nth-child(4) {
        margin-left: auto;
    }
}

After:

When using the :nth-child() pseudo class, it counts from left to right starting at 1, so we can just change the value and move any number of menu item to the right.

Example:

4 menu items – :nth-child(3) will give us 1 on the left and 3 on the right

5 menu items – :nth-child(3) will give us 2 on the left and 3 on the right

6 menu items – :nth-child(3) will give us 3 on the left and 3 on the right

Fun eh?

And that’s it!

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.

Michelle X