[Resolved] Can’t get hide overflow to stick

Home Forums Support [Resolved] Can’t get hide overflow to stick

Home Forums Support Can’t get hide overflow to stick

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2344568
    Salty Communication

    Hi!

    I added this to the additional CSS:

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

    Somehow, it doesn’t work when I browse the page on mobile. I have gone through the CSS and I can’t find anything that interrupts..

    #2344662
    David
    Staff
    Customer Support

    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 ?

    #2345021
    Salty Communication

    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;
    }
    #2345055
    David
    Staff
    Customer Support

    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.

    #2345523
    Salty Communication

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

    -J

    #2345636
    David
    Staff
    Customer Support

    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.

    #2346311
    Salty Communication

    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.

    #2346510
    David
    Staff
    Customer Support

    Change:

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

    to:

    
    /* Hide overflow */
    html, body {
        overflow-x: hidden;
    }
    #2347024
    Salty Communication

    Got it! Thanks!

    #2361730
    David
    Staff
    Customer Support

    Glad to hear that!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.