Add the CSS code

Some of the header designs need a little bit of CSS. don't worry it's very simple

Copy the CSS Code

Simply copy this CSS code :

/** HEADER **/
 .loops-header-blurb .et_pb_blurb_container {
     padding-left: 0px;
}
 .loops-header-infos .et_pb_blurb .et_pb_blurb_content, .loops-header-infos .et_pb_blurb {
     width: max-content;
     margin-left: 0px !important;
}
 .loops-header-infos {
     display: flex;
     align-items: center;
     gap: 50px;
}
.loops-header-infos .et_pb_main_blurb_image{
    vertical-align: middle;
}
 .loops-bottom-header-7 .et_pb_menu__search-container {
     height: max-content !important;
}
 @media screen and (max-width: 980px) {
     .loops-header-style-16 .et_pb_column_1_4, .loops-header-style-17 .et_pb_column_1_4, .loops-header-style-18 .et_pb_column_1_4 {
         display: none;
    }
}
/** MENU **/
.et_pb_menu--without-logo .et_pb_menu__logo-wrap{
    display:none;
}
.et_mobile_menu {
   overflow: scroll !important;
   max-height: 84vh;
}
 .et_pb_menu.et_pb_bg_layout_dark .et_pb_menu__search-input {
     color: white;
}
 .mobile_nav.opened .mobile_menu_bar:before {
     content: "\4d";
}
 nav .menu-item-has-children>a:first-child:after {
     -webkit-text-fill-color: initial;
}
 nav .menu-item.current-menu-item>a {
     background: none !important;
     -webkit-text-fill-color: unset !important;
}
/* SUB MENU STYLE */
 nav .sub-menu li.menu-item {
     border-bottom: 1px solid rgb(0, 0, 0, 0.1);
}
 nav .sub-menu, .et_mobile_menu {
     border-top: none !important;
     box-shadow: 0px 5px 40px #0000002b !important;
     padding: 0px !important;
     border-radius: 5px;
}
 .et_mobile_menu {
     padding: 5% !important;
}
 .et_mobile_menu .menu-item-has-children>a {
     background-color: unset;
}
 nav .sub-menu:after {
     content: '';
     display: block;
     position: absolute;
     left: 11%;
     top: -23px;
     width: 0;
     height: 0;
     border-top: 12px solid transparent;
     border-right: 12px solid transparent;
     border-bottom: 12px solid #ffffff;
     border-left: 12px solid transparent;
     z-index: 1;
}
 nav .sub-menu li {
     width: 100%;
}
 nav .sub-menu li a {
     width: fit-content !important;
     padding: 14px 24px !important;
}
 nav .sub-menu li {
     transition: all 400ms ease;
     padding: 0px !important;
}
 nav .sub-menu li a:before {
     transition: all 200ms ease;
     content: '';
     width: 0px;
     background: #564cff;
     height: 40px;
     position: absolute;
     left: 0px;
     border-radius: 0px 5px 5px 0px;
     top: 50%;
     transform: translateY(-50%);
}
 nav .sub-menu li:hover a:before {
     width: 4px;
}
 nav .sub-menu li:hover {
     background-color: rgba(0, 0, 0, .03);
}
 nav .sub-menu li a:hover {
     background-color: unset;
}
 .et_pb_menu.et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li>ul {
     top: calc(170% - 1px);
}
/* BOTTOM HEADER STYLE 15 HOVER ANIMATION */
 @media screen and (min-width: 980px) {
     .loops-menu-hover-animation {
         padding: 0 20px;
         display: flex;
         height: -webkit-fill-available 
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container {
         height: -webkit-fill-available;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container li.menu-item {
         margin-top: 0px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container li.menu-item a {
         display: flex;
         align-items: center;
         padding: 0 8px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.current-menu-item>a:before, .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.menu-item>a:before {
         content: '';
         background: linear-gradient(#564cff, #7870ff);
         height: 100%;
         width: 100%;
         box-shadow: -5px 1px 5px rgb(0 0 0 / 62%);
         transform: translateX(0) scale(1.08);
         position: absolute;
         left: -20px;
         top: 0;
         opacity: 0;
         z-index: -1;
         transition: left 400ms ease, opacity 200ms ease;
         border-bottom-right-radius: 5px;
         border-top-right-radius: 5px;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.current-menu-item>a:before, .loops-menu-hover-animation .et_pb_menu_inner_container .et-menu>li.menu-item:hover>a:before {
         left: 0px;
         opacity: 1;
    }
     .loops-menu-hover-animation .et_pb_menu_inner_container .menu-item-has-children>a:first-child:after {
         position: relative;
    }
}

Paste the CSS code

Good to know: If you already have a child theme installed, you can paste the CSS code directly into the style.css file of the child theme

Go to the back office of your site then in Divi >> Themes Options, at the bottom of the page you will find a "custom CSS" field, paste the code here.

That's it, I told you it's easy 🎉