Over the coming weeks, we’re going to be pumping out useful CSS snippets to help you achieve your desired Divi website layout ambitions.

While Divi is a great WordPress website theme, you have to sometimes get a little down and dirty with CSS (as you do with all WordPress themes).

This Divi Tutorial is going to show you a few short and sweet snippets to help you align the Divi secondary menu.

Align the Divi secondary menu to the right

Once you add items to the navigation menu you create in the ‘appearance‘ ‘menus‘ section of your WordPress dashboard, and you assign that menu to the secondary menu, via the manage locations tab, your menu items will automatically appear over on the right-hand side. So you don’t need to do anything if you want them to align right.

Align the Divi secondary menu items to the left

If you wish to align the Divi secondary menu items to the left, you’ll have to use a little CSS snippet.

/* Secondary menu alignment */
#et-secondary-menu {
	float: none;
}

Simply copy and paste that code where ever you prefer to place your CSS and your Divi secondary menu items will appear on the left side of the screen.

Align the Divi secondary menu items to the center

If you wish to align the Divi secondary menu items to the center, you’ll need the following CSS snippet.

/* Secondary menu alignment */
#et-secondary-menu {
	float: none;
	text-align: center;
}

The same thing applies, simply copy and paste that code into the Divi theme options custom CSS box, or into your Divi child theme stylesheet, and away you go with your centred secondary menu navigation links.

And there you have it

That was easy, right? Stay tuned for more helpful Divi Snippets in the very near future, and as usual, enjoy your Divi website tweaking and tinkering.