Give Your Navigation Bar Absolute Positioning

 

Give Your Navigation Bar Absolute Positioning

 Divi has a fixed header that now will always appear at the top of the browser. You can use this CSS modification if you have a short website, or do not want the navigation bar to impede your content to add absolute positioning to your header so it scrolls up with the rest of your page. To add this change, just copy and paste the following code into the Custom CSS box in ePanel and click Save. You can easily delete the code from the Custom CSS field if you wanted to revert back to the original style.

 

/*DIVI NAV - ABSOLUTE POSITIONING*/
 
#main-header{
    position:absolute;
}
 
.et-fixed-header{
    top: 0;
    background-color: #fff;
    position: absolute; width: 100%;
    z-index: 99999;
    padding: 18px 0 0 0 !important;
    min-height: 43px !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1) !important;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.et-fixed-header #logo { max-height: 43px; }
.et-fixed-header nav#top-menu { padding-top: 11px;}
.et-fixed-header #top-menu li > a { padding-bottom: 29px;}
.et-fixed-header .et-search-form { top: 46px; }
.et-fixed-header #et_search_icon:before { top: -3px;}