Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

On a few of my Divi projects, I wanted the logo to align all the way to the left of the screen and the main menu to sit all the way to the right of the screen. For example, check out the site I did for Nick Lemau.

Although there are several ways to manipulate this by using CSS, there is an easier alternative. Make a simple adjustment in the header.php file.

Start by opening up your header.php file in your child theme. If you don’t have one in there yet, just copy the header.php file from the Divi directory, to your Divi-child directory.

If you don’t have a child theme yet, follow these painless step by step instructions I wrote in an earlier post. How to set up a child theme. I would also keep a separate back-up of this file just in case.

Next you will want to locate the following line and delete it all together.

 

001

 

Next you want to find the closing tag and remove it as well. Be sure you are deleting the correct closing </div> as there are several closing tags on this file.

 

002

 

Now you may want to have a little padding between the Logo and the left edge so you can add this in your child theme stylesheet.css.

#logo {padding-left: 10px;}

 

And lets do the same for the main menu on the right.

#et-top-navigation {padding-right: 10px;}

 


Well that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert Services | John 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest