Swap Secondary Header Element Positions in WordPress Divi Theme Using Custom CSS Flexbox Styling

by | October 2, 2022 | CSS, Website Development

This page may contain affiliate links to recommended products or services. If you choose to purchase after clicking a link, I may receive a commission at no additional cost to you.

Last updated on: February 8, 2023

The WordPress theme Divi comes with a secondary header area allowing you to optionally display a telephone number, email address, social media icons, and a secondary header navigation menu. On larger screen sizes the phone number and email are rendered on the left-hand-side of the screen and the secondary navigation menu is rendered on the right-hand-side of the screen. But, what if you want to switch positions and display the phone number, email, and social media icons on the right-hand-side and the secondary navigation menu links on the left-hand-side?

You can swap Divi’s secondary header element positions by adding a few lines of custom CSS.

Copy and paste this CSS code into the Additional CSS section available in the WordPress Customizer.

#top-header > .container {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between
}

#top-header > .container::after {
	display: none;
}

#top-header #et-info,
#top-header #et-secondary-menu {
	float: none;
}

#top-header #et-info {
	order: 2;
}

#top-header #et-secondary-menu {
	order: 1;
}

You may need to Publish (i.e. Save) the update and reload the page to see the changes from the WordPress Customizer screen. After publishing the update, refreshing any page on your website would also allow you to see the update.

Using this Custom CSS, the secondary navigation menu is displayed on the left and the telephone number, email, and social icons are displayed on the right.

Floyd Hartford is a website developer from southern Maine. He's focused on creating and building WordPress websites and loves spending time digging into code like HTML, CSS, scss, jQuery, PHP, and MySQL.

0 Comments

Submit a Comment

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

2 × 4 =

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Looking for WordPress Help?

I’m a freelance web developer specializing in small business and corporate marketing websites.

Pin It on Pinterest