Freebie!! Change Header On Scroll Divi Layout

If you haven’t gotten our previous freebies Divi Fullscreen Header and Divi Slide in Headers for the theme builder check them out now. This layout will allow you to change header on scroll to something completely different and allows you to use the divi builder and theme builder to do it. This header also has incorporated very nice menu link hover effects that were taken from a great tutorial that has 101 menu CSS effects provided by Nelson at Pee Aye Creative. Check out his CSS Menu Effects tutorial.

Take a lot at the great demo to see how this can look on your site.  Most of my other header layouts went more for the functionality in the code, but this one looks great and has great functionality and can be easily changed to suit your needs for many different niche and local sites.  This will really make it easy to use as a template for client or your own sites to really build whatever you want for your standard header navigation and the fixed navigation.  It looks great and works beautifully.

This header is broken into three sections

1. The first section is called Main Menu Desktop.  In this section you would put anything you wanted when the page is first shown and there is no scrolling.
2. The second section is called Fixed on Scroll Menu.  This section allows you to change how the menu looks when the user has scrolled past the point set in the code and is the menu that will be shown whenever you are further down the page.(note: the first two sections have only been set for use on desktop/laptops down to 981px width)
3. The third section is called Mobile Menu and this is the menu you want on any screen 980px width or less.  I have made this mobile header not fixed but it could be done with the section settings>advanced>position settings.  In the Mobile Menu the blurbs are three across even on mobile set by some css in the code module.  If you wanted that to change you could delete the code from the module or delete the blurb-row class from the row with the three blurbs

Code and Changes you can make

Much of the layout of this header can be changed right inside of each module in the header though there are some things to know below.

This header works very well when the menu has no dropdowns.  When there are dropdowns the down arrow on a menu item will not show due to the hover effects on the links.  The best thing to do is when you are making your menu add a space and then add this character ▼.  This will allow visitors to see that there is a submenu on a certain menu link.  That was the character I found that worked the best though you could use a down arrow character ↓ or a lower or upper case V.

In this header layout there is a code module that is located in the second section(Fixed on Scroll Menu) in the row and the third column.  Below is only a portion of that code with some of the most common areas you would want to edit to get the desired effect or look of your header.  Anything you want to and know how to edit can be edited to fit what you want to do with the header. The important code to change is highlighted in a pinkish color and here is what each will do by code line.

• 2 This will change how big the menu link area is for each menu link.
• 10 This is the color of the hover effect on the menu link items
• 17 & 20 This is the color of the left and right borders, make both of these the same color
• 25 The 125 in this code may need to be changed depending on the height of your header.  This is essentially the height of the main header in pixels it is set at 125px when added.

.custom-menu .et-menu-nav>ul>li>a{
   padding: 25px 20px!important;
   margin: 0!important;
}
.custom-menu nav>ul>li a:before,.custom-menu nav>ul>li a:after{
   content: "";
   display: block;
   width: 100%;
   height: 100%;
   background-color:#663399;
   z-index: -1;
   -webkit-transform: scale(0.1);
   transform: scale(0.1);
   opacity: 0;
}
.custom-menu ul li{
   border-right:1px solid rgba(255,255,255,.25);
}
.custom-menu ul li:first-child{
   border-left:1px solid rgba(255,255,255,.25);
}
jQuery(document).ready(function($){
  $(window).scroll(function(){
    var scroll=$(window).scrollTop();
    if(scroll>=125){  $("#header-after-scroll").addClass("appear");
  } else{ $("#header-after-scroll").removeClass("appear");
  }
  });
});

How to get this layout

To get this great freebie all you have to do is sign up to my list to get great updates about Divi and web design updates and more of these freebies and tutorials.  I would recommend watching the video above as it gives an overview of how to use these layouts and within the zip file for these layouts there is also a very short list of instructions how to get started with these.  I haven’t tried every module with these so there may be some conflicts.  If you find something that does not work correctly please let me know.

Changelog
Version
1.0 02/15/20 Original Release

1.1 02/16/20 -Fix menu code for menus with dropdown

Hope you enjoy the layout!