Can't get hide overflow to stick

Hi there,

in your CSS you have this:

/* Logo in the middle */
@media(min-width: 769px) {

That open @media query never closes ie. has a } to close the last rule. So every CSS rule below that only applies to screens over 768px width

Do you know what CSS is meant to be inside that media query ?

Hi David,

Hmm. I think it closes, this is the code:

/* Logo in the middle */
@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4) {
        margin-left: auto;
    }
	
.main-navigation {
    position: relative;
}

Nope - i checked :)

See this CSS rule:

/* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4) {
        margin-left: auto;
    }

Change that to:

/* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4) {
        margin-left: auto;
    }
}

That extra } will close the media query.

Perfect David. Thanks!
Another problem appeared now though. However the logo padding on desktop isnt working right now..

-J

I exctracted your CSS and tidied it up.
Try this:

.main-navigation {
    position: relative;
}

/* Menu shadow */
:not(.header-wrap)>.site-header,
#mobile-header.is_stuck,
#sticky-navigation {
    box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, 0.43);
}

/* Site logo padding */
.site-logo {
    padding: 35px 0 0 0;
}

/* Hide overflow */
html {
    overflow-x: hidden;
}

/* Animated underline */
.underline mark {
    background-repeat: no-repeat;
    background-image: linear-gradient(180deg, #EBBF52 0%, #EBBF52 100%);
    background-size: 0% 18%;
    background-position: 0 89%;
    transition: background-size .8s ease-in-out;
    margin: 0 -3px;
    padding: 0 3px;
    font-style: normal;
    will-change: background-size;
}

.underline:is(.animate-underline) mark {
    background-size: 100% 18% !important;
    transition-delay: .4s !important;
}

/*--- Desktop only CSS ---*/
@media(min-width: 769px) {
    
    /* Logo in the middle */
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(4) {
        margin-left: auto;
    }
}

/* --- Mobile only CSS -- */
@media (max-width: 768px) {
    
    .main-navigation .main-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 500ms ease-out;

    }

    .main-navigation.toggled .main-nav {
        max-height: 1000px;
        transition: max-height 500ms ease-in;
    }

    .main-navigation .main-nav>ul {
        display: block !important;
    }

    .has-inline-mobile-toggle #site-navigation.toggled {
        margin-top: 0;
    }

    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: right;
    }

    .main-navigation .main-nav {
        flex-basis: 100%;
        order: 3;
    }
}

NOTE - its in 3 sections.
The top section is where you add your general styles, so a style that applies to all devices. Then below is the Desktop only CSS and Mobile CSS. If you keep the CSS in that order in those 2 sections then you're less likely to have issues.

THANKS David!
Everything works right now, but the overflow is still kind of funky on mobile. The page doesnt stick when I am scrolling horizontally during the animations.

Change:

/* Hide overflow */
html {
    overflow-x: hidden;
}

to:

/* Hide overflow */
html, body {
    overflow-x: hidden;
}

Got it! Thanks!

Glad to hear that!