pixel

Often a few creative twists can completely customize a website.  A few weeks back someone posted a How Do I question with regards to a navigation / header that was so pretty it has stuck in my head.  Of course I can’t find that post or her example, but I have created my own and will share with you the steps. Shout out to graphic designer Mor Cohen who created the retro logo for us to use in this example.

Let me begin by telling you the tools you will need:

  • Divi Layout Injector
  • Mobile Menu Customizer for Divi This plugin isn’t actually needed to get the look, but the using the Layout Injector in this way will not translate well to mobile. I wanted to give you a heads up that you are probably going to want a second plugin if you are going for this look.

To begin, install the Layout Injector and make sure you have added your license code.

  • Next, go to a page or post and Use the Divi Builder.
  • Add a regular section
  • Select columns, my example has 3, of course, you can be as creative as you like.
  • In the Center Column, add an image module and upload your logo.  Make sure it is centered.
  • In the left-hand column, add a text module.  Add text that will link to the various pages on your website (maybe: Home, About, Services, Blog).  Toggle to Design Mode and set the height, font, line spacing, orientation (I suggest right-hand orientation, but you are a designer, so feel free to play).
  • In the Text modules toggle into the Design tab and set the Margin & Padding to 0 on the right to 0 for the Right Text Module and 0 for the Left.
  • In the right-hand column, add a text module (or just duplicate the left-hand side and change the links).  Add text that will link to the various pages on your website (maybe: Contact, Location, Portfolio, Contact).   Make sure you modify the margin and padding to reflect the right side. Work your style magic.
  • Save to Library.
  • On the left-hand side of your WordPress navigation bar look for Settings and select Divi Layout Injector.
  • Under General Settings tick the box Hide default header entirely.
  • Scroll down a little bit and look for Pre-Header Layout and select the name of the section you put in the library (in my case, Center Icon Nav Bar)
  • SAVE

Notes:

  • If you wish to edit something, go into your Divi Library
  • DO NOT save the section to your Library as a Global Item – using the library / layout injector combo will effect changes globally.

Helpful Images

Your Three Column Layout in the Divi Builder. Two Text Modules with the Image Module in the center.

Your Three Column Layout in the Divi Builder. Two Text Modules with the Image Module in the center.

Instead of trying to remember to hide the Nav Bar on each page of Divi, select Hide default Header Entirely in your Divi Layout Injector Settings

Instead of trying to remember to hide the Nav Bar on each page of Divi, select Hide default Header Entirely in your Divi Layout Injector Settings

In the Pre-Header Layout area select the layout you have SAVED to your Divi Library.

In the Pre-Header Layout area select the layout you have SAVED to your Divi Library.

 

In the Text modules toggle into the Design tab and set the Margin & Padding to 0 on the right to 0 for the Right Text Module and 0 for the Left.

If you want add social media icons or horizontal lines between items or you could even have icons along with text.

As I mentioned earlier, this won’t look great on mobile, so you may want to use a plugin to create a mobile navigation.

What do you think?  Like the look or not your jam?

EIleen Lonergan
Eileen Lonergan was an integral part of this company. Unfortunately, Eileen Passed away on the 31st of October 2018 after a short battle with Cancer. She leaves behind the legacy of the Divi Theme Users Group and hundreds of people that she helped through coaching, building outstanding websites and just being - accessible. We miss her every day!

Subscribe To Our Newsletter to get the latest news and product updates

You have Successfully Subscribed!

Pin It on Pinterest

Share This