- This topic has 9 replies, 2 voices, and was last updated 2 years, 4 months ago by
David.
-
AuthorPosts
-
September 16, 2022 at 2:40 am #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..
September 16, 2022 at 4:04 am #2344662David
StaffCustomer SupportHi 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 widthDo you know what CSS is meant to be inside that media query ?
September 16, 2022 at 8:03 am #2345021Salty 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; }
September 16, 2022 at 8:45 am #2345055David
StaffCustomer SupportNope – 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.September 17, 2022 at 1:20 am #2345523Salty Communication
Perfect David. Thanks!
Another problem appeared now though. However the logo padding on desktop isnt working right now..-J
September 17, 2022 at 4:38 am #2345636David
StaffCustomer SupportI 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.September 18, 2022 at 1:11 am #2346311Salty 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.September 18, 2022 at 7:30 am #2346510David
StaffCustomer SupportChange:
/* Hide overflow */ html { overflow-x: hidden; }
to:
/* Hide overflow */ html, body { overflow-x: hidden; }
September 18, 2022 at 10:55 pm #2347024Salty Communication
Got it! Thanks!
October 3, 2022 at 8:52 am #2361730David
StaffCustomer SupportGlad to hear that!
-
AuthorPosts
- You must be logged in to reply to this topic.