lilyweitzman Posted March 7, 2023 Share Posted March 7, 2023 (edited) Good day. site password: lily I inherited a site with CSS. Clients are interior designers and have a very particular aesthetic. Client noticed logo in header is slightly off-center. We are using CSS to display the hamburger menu on desktop (vs full navigation) which seems to be the culprit. Code pasted below and screen recording here: https://share.squarespace.com/p9uejpm8 CSS: .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} .header-menu-nav-item { line-height: 2em } @media screen and (min-width: 768px) { .header-menu-nav-item a { font-size: 2vmin; } } Edited March 7, 2023 by lilyweitzman posted too soon Link to comment
Ziggy Posted March 7, 2023 Share Posted March 7, 2023 Looking at the website, I don't see the same slight offset of the logo that you're demonstrating in the video, is it only happening when you're logged in? lilyweitzman 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com Hire me on Upwork! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
lilyweitzman Posted March 7, 2023 Author Share Posted March 7, 2023 Thank you, Ziggy. This is a development site so we must be logged in to view. URL: https://blackbird-goose-w7ys.squarespace.com/projects Ziggy 1 Link to comment
EjD Posted March 7, 2023 Share Posted March 7, 2023 Looks like the hamburger menu is taking up 47px of space pushing the logo that far to the left. If you add a -47 right margin to the logo it should center (see screenshot). lilyweitzman 1 Link to comment
Solution lilyweitzman Posted March 7, 2023 Author Solution Share Posted March 7, 2023 Thank you to Ziggy for helping me to add the necessary padding to account for the hamburger menu. //display hamburger menu on desktop .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} //modify menu font size .header-menu-nav-item { line-height: 2em } @media screen and (min-width: 768px) { .header-menu-nav-item a { font-size: 2vmin; } } //padding to center logo @media screen and (min-width: 768px) { .header-title-logo img { padding-left: 47px; }} Ziggy 1 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