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.
Hi i have applied this layout looks really good but only problem is on the phone it looks really big and in the way of the text on the menu how do I make them smaller or disappear when in mobile mode?
My social icons are displaying twice http://www.nehd.org/site
Any suggestions?
Looks really cool. We are having issues making custom menu items color change on hover when the menu is fixed. Its due the the !important force on the element css.
Hi ! Thanks a lot for this tutorial 🙂
Do you know how i could make the sub-menu opens inside the menu and stays open ?
thanks !
I’m wondering, if I want to color the parent menu-item when a sub-page is selected, how would I do this?
Nevermind 😀 Figured both of them out on my own, thanks for the inspiration though!
And the solution for this one was:
#et-top-navigation ul.nav .current_page_parent > a {}
Hey there!
I’m trying this mod out, but I’m having trouble with the skewed part. You are only using icons, but I want to have some text in there, so I’ve tried wrapping the menu items text in a span. But skewing it back to get non-italic text seems to do nothing.
I tried this:
In the menu:
Login for users
Custom Css class “login-button”
In the custom CSS part
.login-button span {
-ms-transform: skewX(20deg);
/* IE 9 */
-webkit-transform: skewX(20deg);
/* Safari */
transform: skewX(20deg);
}
The editor erased some of my code.. Login for brugere
in case someone else had this problem. The solution was to target the link with
.login-button a {}
When I changed the background color of the the area under the social icons, there are divider lines that show up in between each social icon. How do I change the colors of the slanted divider lines?
Hi there, I love this tutorial. However I’m having a slight issue with its use with Divi 2.7.5.
I love the way the ‘Active Page’ menu has the coloured background which kind of locks to the bottom of the navigation bar on scroll, but, whenI have a page that is set within a drop-down menu from a ‘Parent Page’ the current css makes that Navigation option blank (in this case a ‘Services’ drop-down option).
Could you spare some css to cover this also please?
Love your work, its really appreciated!
Many thanks, B 🙂
Hi Stephen, thank you for this great post. Everything has worked so far…apart from the skewed social icons. I’ve re-read and followed your instructions, but it’s still skewed. Also the icons are smaller than yours in the video – any tips would be most appreciated.
Lastly, the skewed icons are also showing in my mobile/tablet menus; any advice how to fix this?
Many thanks.
To anyone else having problems with the icons not skewing back. It’s mostly likely related to linking issues.
If you look at the code carefully, you’ll see that he uses the “fa-facebook-official” version of the Font Awesome icon. If you use any other version, for instance “fa-facebook-square”, the code won’t work, since you’re linking to another version in the Navigation Label. Stephen also added “fa-2x” to the snippet, which doubles the size of the icon.
Also, be careful how you change the CSS code. So if I chose “fa-facebook-square fa-3x” for my Navigation Label, I need to write “i.fa.fa-facebook-square.fa-3x” in the CSS to link to it properly.
Hope that helps.
Hello, and what a wonderful LOGO effect.
I got it working, only thing is that the HOME icon pops from small to big.
Did I miss something?
Awaiting your advice and very best regards,
Frans
Is this a responsive menu? I didn’t see a demonstration of how it looks on a mobile device in the video.
I am working on a one page site so from your answer to Roshin I understand I cannot use the coloured tabs, but I managed the logo and hover home icon and I see it works also when centered.
thanks a lot.
Thank you for sharing!
Just implemented a logo effect (1-st vershion). Live demo is here eshop101.ru
Regards,
Igor
Hi
Related question – I need to set a different colour for a URL hyperlink within one text module on one page. I’ve tried using basic colour text code within the module CSS, but the default URL link colour (set in Theme Customiser) overrides my colour code.
Do you know a simple CSS code I can use within a text module to make my URL link a different colour to the colour set in my Theme Customiser?
Thanks!
Instead of page specific colors, can we make it section specific colors for a one page website? Thanks for the wonderful tutorial
Not without JS. THe section IDs are inside the #main-content area so you can’t use it as a parent selector to control the header.
Hi There,
I tried the logo effect but to me the logo stretch is not working good.
Because I want just the logo to appear at the left, and when I hover the Name should slide in from left to right. Can that be done.
Please let me know.
And Thanks for the wonderful tutorials
For some reason, I have everything working except the menu items. I have the Home item working as it should, but the other menu items a) won’t transition to the rounded active background,
and b) the social menu changes color with each link, but the link color won;t change.
Can someone help figure this out … I’d be so appreciative
Regards,
Charles
A Divi/CSS newb question — should I insert the custom CSS? Under Divi > Theme Options > Custom CSS? Thanks!
These modifications look stunning – thank you for sharing. Can you suggest a workaround to apply the active menu link color and social menu background color for my Blog menu link? Currently, I set the Posts page to my Blog page in Reading Settings, and the custom color does not work. If I do NOT designate my Blog page as the Posts page in Reading Settings, the custom color works, but then I lose my posts on the blog page. The custom colors work brilliantly on all of my other menu links. Thank you!
Hi,
I absolutely cannot get the transition part to happen. I am trying to just do the part where your home icon pic morphs into a different icon when you hover over it. I can get them to change from one to the other, but the smooth animation like you have in your video just does not happen. Do you have any extra tips? I followed all of your instructions from here exactly. Thank you for your help, I really appreciate it!
-John
I’m wondering about the smooth transition too – I know it’s a css transition effect but wondering how it gets added into the mix to make it all look smoother 🙂 Thanks!
Excited to see this work as well. For some reason I’m not even getting the image to change on hover. I have the logo centered, would that make any difference? Thanks!!!
http://ramshacklegenius.com/wagitout/
That’s going to look great on my next project! Thanks SJ!
This is epic! I love the different colours in the nav menu for different pages. Will definitely be implementing that into my site design.
Side note: I’m from Portsmouth, UK too!
Hi!
Thanks a lot! This is sexy indeed
I will try it for my next client, looks perfect for her.