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:
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:
@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: