WordPress Divi Theme Customizer

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

This blog is reader-supported. When you make a purchase through links on my site I may make a small commission at no additional cost to you.

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.

Share this post!

0 0 votes
Article Rating
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments