Header – Flourish Testing Ground

Different Header on Scroll:

https://element.how/elementor-change-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