Divi Nation Short: 3 Super Simple Divi Header Modifications

It’s Friday and here on the Elegant Themes blog that means a new episode of Divi Nation. It’s a Divi Nation Short this week and as promised in previous episodes I’ve bundled three Divi Quick Tips into one. This time around we’re making some simple, subtle modifications to Divi’s header and navigation using a few snippets of code.

You’ll find everything you need to follow along in the sections below. Enjoy!

Divi Nation Short: 3 Super Simple Divi Header Modifications

[powerpress]

In this episode of Divi Nation, the official Divi podcast, I show you three Divi header modifications that are quick and easy to execute. You’ll find everything you need in the sections below to follow along with each Divi Quick Tip. If you have any questions about the tips themselves or requests for new Divi Quick Tips, please leave me a comment in the comments section below.

Subscribe To Our Youtube Channel

All Subscription Options:

• YouTube
• Facebook
• iTunes
• Subscribe via RSS

How to Display Your Divi Site Title Text Instead of a Logo Image

First up, displaying your site title text instead of the Divi logo image. There are two steps to this quick tip.

Step 1: Make sure that your Header.php file is in your child theme.

If you’re not sure if your child theme has that file, you can check by going to Appearance > Editor and looking for the Header.php file.

If it’s there, you’r ready for step two.

If it is not there, here’s what you do:

Access your site’s file tree via FTP. As you can see, I’m using an app called Transmit, but you can also just use your hosts web ftp. There should be a link in your epanel there.

Go to wp-content > themes > Divi. Duplicate the header.php file. Drag the duplicate down into your Divi Child theme. Make sure the file name within your child theme reads simply “header.php”.

Save that and head back to your WP Admin.

Now, when you go to Appearance > Editor you should find the header.php file there.

Step 2: Swap out a single line of code in your child theme’s header.php file.

What you can do to make this part really easy is simply copy the “logo” line of code from the blog post, then use command+f to find that line in the editor.

img src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />

Once you’ve found it, replace it with the “name” line of code.

<span style="font-family: 'Open Sans', Arial, sans-serif !important; color: #505050; font-size: 20px; font-weight: bold;"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>

This line of code replaces the logo image with your site name and gives you a few styling options too. You can adjust the font family, color, font size, and font weight by adjusting the styles within the .

If you want a few more font options I’ve included a link in the blog post to w3schools that shows you how to list a few other web safe fonts in the same way I’ve used Open Sans. Font options: http://www.w3schools.com/cssref/css_websafe_fonts.asp

When you’re done, save the edit you’ve just made to your child theme’s header.php file and check out the result on the front end of your site.

As you can see, you are now displaying your site title instead of a logo image.

Pretty awesome, right?! This is a great little trick for anyone who doesn’t have or want a logo.

Let’s move on to our second Divi header modification.

How to Add a “Slide-Over” Effect to the Divi Slide-In Menu Option

Next up, we’ve got what I’m calling the “slide-over” menu effect. This one is subtle so before we make any changes let me show you want the new slide-in menu option is supposed to look like in action.

As you can see, when I click on the menu’s hamburger icon, the menu slides in from the right and the entire page container is pushed to the side.

The change we’re going to make will result in the menu sliding over the page container, instead of pushing it aside.

Let me show you the “slide-in” again.

Ok, now let’s make our change and see what happens.

Copy the CSS snippet for this from the accompanying blog post and then head over to Divi > Theme Options. Scroll down to your custom css panel, and paste it there.

.et_pb_slide_menu_active #page-container, .et_pb_slide_menu_active #main-header { 
left: 0!important;
}
.et_pb_slide_menu_active #et-top-navigation {
margin-right: 320px;
}

Now click save changes and go back to the front end to refresh and view the difference.

As you can see now, instead of pushing the page container aside, the menu slides in over top of the page container, overlapping instead of pushing.

It’s subtle, but a cool variation nevertheless.

Ok, moving on!

How to Add a 360 Degree Animation Effect to Divi’s Dropdown Menu Arrows

For our final modification we’re going to add a fun little 360 degree rotation animation effect to your dropdown menu arrows. This effect will work on the three classic Divi menu styles: default, centered, and centered inline.

Again, you’re going to want to copy and paste the appropriate CSS snippet from this episode’s accompanying blog post.

#top-menu li > a:after {
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#top-menu li:hover > a:after {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}

Once you’ve copied it, head back to Divi > Theme Options and scroll down to the custom css panel. Paste it in there and click save changes.

Now, when you go back to the front-end of your site and refresh, you’ll notice that when you hover over your scroll down menu the arrow does a 360 degree spin.

Again, this is a subtle little effect to a small part of your site, but pleasant little micro-interactions like this are a great way to improve the user experience.

What Divi Quick Tip Would You Like to See Next?

That’s all for this round of Divi Quick Tips. Do you have anything in particular that you’d like me to cover in a future episode? If so, leave it in the comments below and I’ll add it to the queue!