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)
- 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.
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?