Ever noticed that every Divi theme layout has a right aligned navigation menu? In this short tutorial I will show you how to align the navigation menu items on left next to the logo.

You can save your time by checking out the video tutorial below:

Video: How to left align the Divi navigation menu links.

Full Tutorial:

If you go to Theme Customizer > Header & Navigation

You will see the different ways you can display the header menu.

The default set of options give you the choice to choose between 5 different alignment types.

But none of them let you align the menu items this way:

So we gotta mess with some custom CSS to achieve this layout.

This is achieved by targeting the #et-top-navigation ID -which controls the top navigation options.

Go to Theme Customizer > Additional CSS

and enter this bit of CSS:

Hit “Publish”

That extra @media bit makes sure that this CSS gets applied only on desktop; and in mobile or tablets it stays the same.

The final result will be a little bit like this.

Over to you.. did you find this tutorial useful? Please give it a share/tweet and let me know if you have any questions in the comments below:

Pin It on Pinterest