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.