Different Header on Scroll:
Add the Word "Menu" to Toggle:
.elementor-menu-toggle:before {
position: relative;
content: "MENU";
padding-right: 10px;
bottom: 0px;
color: #7c2525;
font-family: "Cabin Condensed", Sans-serif;
font-size: 1em;
}
Logo shrinks on scroll: check the custom css for the logo and the header section:
Add Overlay on page when MegaMenu is engaged... add this code to mega menu css
Code found on this page: https://element.how/elementor-nav-menu-overlay-page/
/* overlay when sub nav are opened */
.e-n-menu-content::before {
content:'';
position: absolute;
width: 100%;
height:200vh;
background-color:#000000;
top:0;
z-index:-4;
pointer-events:none;
opacity:0;
transition: opacity 0.3s;
}
.e-n-menu-content.e-active::before {
opacity:0.7;
}
Add Overlay on page when regular dropdown menu is engaged
selector .elementor-nav-menu > li.menu-item-has-children::after {
content: "";
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background-color: transparent;
pointer-events: none;
transition: background-color 0.3s;
}
selector .elementor-nav-menu > li.menu-item-has-children:hover::after {
background-color: #FFFFFFBF;
}
Logo Changes on Scroll, can change background color etc; note classes and css on logos and header section
See sample below
