LSwioklo Posted November 7, 2022 Share Posted November 7, 2022 (edited) Basically the designer wanted to have a navigation layout that wasn't a default layout option provided in 7.1. I am hoping to disable the navigation on desktop + tablet, but show the default burger menu on mobile. I have tried several versions of media queries to hide the header, but they keep seeming to be ignored. I can only get the header to hide, sitewide, not specific to browser width. I'm posting the media queries in the Custom CSS editor. Any ideas? P: spinach2022 /* ------------ MOBILE SPECIFIC QUERIES --------------------- */ @media screen only and (max-width: 640px) { } /* ------------ TABLET SPECIFIC QUERIES --------------------- */ @media screen only and (min-width: 641px) and (max-width:950px) { /* Hide Navigation */ #header { display: none !important; } } /* ------------ DESKTOP SPECIFIC QUERIES --------------------- */ @media screen only and (min-width: 951px) { /* Hide Navigation */ #header { display: none !important; } } Edited November 7, 2022 by LSwioklo forgot to add URL Link to comment
LSwioklo Posted November 7, 2022 Author Share Posted November 7, 2022 URL is not posting for some reason, test URL; https://chipmunk-ellipse-66gh.squarespace.com/ Link to comment
Ziggy Posted November 8, 2022 Share Posted November 8, 2022 Try this instead: @media only screen and (min-width: 641px) { .header { display: none; } } .header instead of #header. Position of only in the media query wasn't correct. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment