lilyweitzman Posted March 7 Share Posted March 7 (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 by lilyweitzman posted too soon Link to comment
Ziggy Posted March 7 Share Posted March 7 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 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
lilyweitzman Posted March 7 Author Share Posted March 7 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 Share Posted March 7 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 Author Solution Share Posted March 7 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