The other day I was redesigning one of my company websites to use Divi instead of the other theme I was using on it and thought let’s try to create a smaller header that is not attached to the top of our page, I liked how it looked.
Static version:
First step would be for you to go to your epanel settings and turn fixed header off, so that it will be static and stay up the top as you scroll through your website. First we are going to add the css that will change how your header looks.
#main-header{
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 60px;
left: 0;
right: 0;
}After you’ve added this CSS your page should look like this.
Now we need to get rid of that gray space around our header, we need to add the following css to pull our fullwidth section up.
#et-main-area{
margin-top: -150px;
padding-top:5px;
}
#content-area{
margin-top:120px;
}You night need to play with the margin-top on #et-main-area to get it to look good on your website. Content-area will have an impact on your pages that are not built with the Divi page builder, it pushes those pages content down so that they are not hidden behind the header.
If you plan on building your pages with the page builder we recommend using a full width header to make the page look nice. When you add your fullwidth header, go to custom css tab and scroll down to header container and add
padding-top: 100px;
padding-bottom: 100px;It should now look something like this.
Fixed version:
In the static version we got most of the setting needed, all we’ve got to do is change some epanel settings, change some css and add one more css class. So to start, let’s go to the epanel setting page and look for fixed navigation bar and enable it, then scroll further down until you come to the option to enable the smooth scrolling and enable it. Then let’s add our fixed header css to our css for this tutorial. We want to remove the space above our header, so that when you scroll the header is stuck at the top.
.et-fixed-header{
margin-top: 0px !important;
}The margin-top we added earlier to #et-main-area is a bit too much when we turn fixed navigation bar on, everything seems to go further up on the page.
So let’s replace it with the following:
#et-main-area{
margin-top: -85px;
padding-top:5px;
}If it’s not quite looking right play with the margin top till it looks right on your website. Now when you scroll it should look something like this.
Only on homepage:
To make the header only affect your homepage it is as simple as, adding .home in front of our other css id and classes. Here is how your css should look now:
.home #main-header{
width: 80% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 60px;
left: 0;
right: 0;
border: 1px solid #1e1e1e;
}
.home .et-fixed-header{
margin-top: 0px !important;
}
.home #et-main-area{
margin-top: -85px ;
padding-top:5px;
}It will now default to the normal header on every page but your home-page, you can delete this css id.
#content-area{
margin-top:120px;
}Now all that left to do is make this code mobile-friendly so that your website is still looks good on all devices.
@media only screen and (max-width : 980px) {
.home #main-header{
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0px;
position: fixed;
left: 0;
right: 0;
}
.home .et-fixed-header{
margin-top: 0px !important;
}
}Your website should now look something like this.
Your website should now look something like this. You can view my version here, just note we are busy rewriting our content so it not 100% complete. Question: The only other question I got asked was how this would effect page loading time, it only a few lines of css so it does not take much longer to load when I tested my site on Pingdom it loaded in under 3 seconds, plus that page has not been optimized yet which is pretty fast considering, some sites might take longer to load all depends on what you add to your website. I hope you achieve a unique looking website with this header design. There are ways you could take this to the next level and I hope you do, I would love to see what you do with this header idea.
