These header modifications are very sexy

You can almost always recognize a Divi built website by it’s header. That’s not a terrible thing, the default header is actually quite lovely. But as the theme grows in popularity we have to find new ways of making sure our work doesn’t look ‘samey’.

Here’s a cool header you can build in about 20 minutes, that looks absolutely nothing like default Divi. All of the changes are made in CSS which keeps things mega simple. Heres what you need to do…

*Make sure your header is set to full width with the logo on the left.

*Make sure your primary and fixed navigation are set to equal heights. We used 50px. If you want our code to work exactly the same then you’ll have to use the same sizes.

Creating the logo effect

This effect is create with three image files.

1. Your logo

2. A home Icon

3. A transparent png the same height and width as your logo

Upload all three files to your media folder.

Step One: Set the transparent png as your logo in Divi settings. This holds the space for your logo but actually looks like you don’t have one.

Step Two: We then use CSS to add your logo as a background image, it’ll show perfectly because your actual logo is just a transparent rectangle.

Step Three: We then target the hover state for your logo and change the background image to a menu icon.

Hey Presto, you’ve got a transitioning logo! Here’s the CSS:

html #main-header #logo {
background-image: url(http://the-url-for-your-media-folder-image);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
html #main-header #logo:hover {
background-image: url(http://the-url-for-your-home-icon-image);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
opacity: 1;
}

There’s a bunch of cool home icons here.

Adding the Font Icons

I don’t want to turn this tutorial into a whole “Adding Font Awesome” thing so here is a great tutorial on how to do it byEileen Lonergan, creator of the Divi Theme User Group.

If you follow that tutorial you should see that the icons in the header are simple to do. The only bit that wavers from that approach is the two end icons for Facebook and Twitter, where we’ve removed the label text and doubled their size. Here is the info on icon sizes for Font Awesome.

We then gave the two end menu links a different class to the rest of the menu, by toggling the CSS classes option “on” in menu settings –

And then setting the class to .social-menu for both items –

The CSS we then use does three things.

1. Increases the margin slightly on the right hand side of the menu icons, so they don’t press up against the link text.

i.fa {
margin-right: 4px;
}

2. Adds the background colour and ‘skew’ to the social menu icons.

.social-menu {
-ms-transform: skewX(-20deg);
/* IE 9 */
-webkit-transform: skewX(-20deg);
/* Safari */
transform: skewX(-20deg);
background-color: rgba(206,71,83,1);
left: 44px;
margin-bottom: 4px;
margin-left: -5px;
margin-top: -30px;
padding-bottom: 0px;
padding-left: 31px;
padding-right: 50px!important;
padding-top: 20px;
right: auto;
top: 4px;
width: 69px;
}

3. Straightens the social menu icons back up again (after the last code makes them look italic because of the skew).

i.fa.fa-facebook-official.fa-2x, i.fa.fa-twitter.fa-2x {
-ms-transform: skewX(20deg);
/* IE 9 */
-webkit-transform: skewX(20deg);
/* Safari */
transform: skewX(20deg);
}

So now you have the cool logo and the altered background for the social icons at the end. Next comes the active menu links and changing social menu background…

Page Specific Active Menu Link Colours and Social Menu Background

Essentially, all we’ve done to achieve this effect is targeted the pages linked from the menu and used their page ID’s to set the active menu link colour and colour of the social menu background accordingly. First let’s look at how to identify the page id of any given page…

Where to find the page ID in WordPress

Click on edit page…

Hover over the small ‘edit’ button on the right hand side (red arrow). This will bring up a URL in the bottom left hand corner with your page number in it (green arrow). That number becomes your ID. In our example the number is 63, so our ID class for that page would be:

.page-id-63

The two elements we want to change on any given page are the colour of the social menu and the active link, so our selectors for this page would be:

.page-id-65 #et-top-navigation ul.nav .current_page_item > a AND .page-id-65 .social-menu

But before we set specific colours, let’s adjust the size and shape of all active menu links…

#et-top-navigation ul.nav .current_page_item > a {
background-color: rgba(186,186,186,1);
border-radius: 15px;
margin-top: -4px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
}

This makes them all the right shape and gives them a rounded edge. The negative top margin stops the whole menu being pushed down as we’ve added top padding to the link.

Now the page/colour specific CSS:

.page-id-65 #et-top-navigation ul.nav .current_page_item > a {
background-color: #CE4753;
}
.page-id-65 .social-menu {
background-color: #CE4753;
}

The colour for the social menu background and active link background should stay the same if you want to achieve our effect. This CSS can be repeated for every page you want to target, just remember to add the relevant page ID each time.

All Together Now

So all of that CSS together looks like this:

/** Logo Transition **/
html #main-header #logo {
background-image: url(http://element.madebygritty.com/wp-content/uploads/2015/07/gritty-logo-white-small.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
html #main-header #logo:hover {
background-attachment: scroll;
background-image: url(http://element.madebygritty.com/wp-content/uploads/2015/07/home63.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
opacity: 1;
}
/*Social Icons */
@media only screen and ( min-width: 981px ) {
.social-menu {
-ms-transform: skewX(-20deg);
/* IE 9 */
-webkit-transform: skewX(-20deg);
/* Safari */
transform: skewX(-20deg);
background-color: rgba(206,71,83,1);
left: 44px;
margin-bottom: 4px;
margin-left: -5px;
margin-top: -30px;
padding-bottom: 0px;
padding-left: 31px;
padding-right: 50px!important;
padding-top: 20px;
right: auto;
top: 4px;
width: 69px;
}
}
@media only screen and ( min-width: 981px ) {
i.fa.fa-facebook-official.fa-2x, i.fa.fa-twitter.fa-2x {
-ms-transform: skewX(20deg);
/* IE 9 */
-webkit-transform: skewX(20deg);
/* Safari */
transform: skewX(20deg);
}
}
i.fa {
margin-right: 4px;
}
@media only screen and ( min-width: 981px ) {
i.fa.fa-twitter.fa-2x {
left: -20px;
position: relative;
}
}
/* active link size and shape */
#et-top-navigation ul.nav .current_page_item > a {
background-color: rgba(186,186,186,1);
border-radius: 15px;
margin-top: -4px;
padding-bottom: 6px;
padding-left: 8px;
padding-right: 8px;
padding-top: 6px;
}
/* Colour Settings – copy and paste, remembering to change the colour and page id for new pages*/
.page-id-65 #et-top-navigation ul.nav .current_page_item > a {
background-color: #CE4753;
}
.page-id-65 .social-menu {
background-color: #CE4753;
}

You’ll noticed we’ve added some media queries into the final code. This stops the social icons having a background colour in the mobile menu and keeps them inline. A much better look overall but feel free to play around with different code if you want to keep the background.

That’s it! All done. If you use some or all of this code for anything, show us in the comments. We’d love to see it.

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.