How to change the order of Divi secondary menu items


If you use the Divi theme you surely love the secondary menu and have used it on more than one website, being a great way to display contact options and your social networks.

menu default

In this menu you can put on one side, in addition to the default fields for phone and email, links to the social networks of the web; and at the other end any menu you assign to the location.

header elements
contact secondary menu

But there is no setting to change the location of both elements: social icons + email + phone and custom menu. By default, the first are on the left and the second on the right.

But actually, if you want, you can make the change, and it’s very simple, you just have to add a little bit of CSS code in the additional CSS section of the customizer, just that.

The code is this:

/* Change order of secondary menu elements Divi */
#top-header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row-reverse;
flex-wrap: wrap; }
#top-header .container:before, #top-header .container:after {
display: none; }
#top-header #et-info, #top-header #et-secondary-menu {
float: none !important;
}Code language: CSS (css)

And it’s that easy to do.

before menu change
after menu change

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top