jbellissimo Posted October 24, 2023 Posted October 24, 2023 Hi! Let me first state that I've tried to find this answer on my own AND that I am, at best, merely familiar with CSS in that I can copy-paste existing code and understand enough to alter it to meet my needs. So, I'm still very much a beginner. I was silly enough to base my logo on the same font that I'm using across my site (Lato), which has inextricably (to me, anyway) created an implied size relationship between my logo and the navigation menu in my header. The relationship above isn't perfect, but it's close enough for demonstration. Now, as the browser window sizes change and stray away from my laptop screen size (1440x716), the logo is slightly smaller or larger than the opposing navigation menu, like so: 1920x1080 - logo slightly smaller and 1024x1366 - logo slightly larger I've experimented with using @media queries to size the logo at various screen stages. Still, I'm curious as to whether there might be a way to use CSS to make the image constantly aware of the relative size of the font/navigation menu as it gradually increases and decreases in size when the window is sized up and down. Likewise, perhaps it's possible to make adjustments based on the size of the viewport units (vh, vw, vmin, vmax, etc.) What do you think? Also, regardless of the @media queries and how I've tried to construct them using ranges, they are overridden in some cases by what seems to be some underpinning built into the template or responsive layout system that makes the image/logo jump sizes for instance, at 1920. I'm pretty sure I was using !important to force my choice, but I can't say. Despite trying to be systematic, sometimes I'm just flailing, trying things, and then dumping them when they don't work, so I can't say for sure. Thanks for reading this far. Any help is appreciated. Thanks, Jay
Ziggy Posted October 24, 2023 Posted October 24, 2023 What height do you have the logo set to currently in the header settings? Can you share your website URL? 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
jbellissimo Posted October 24, 2023 Author Posted October 24, 2023 (edited) Thanks! The website is https://www.bellissimoeditorial.com The native logo size is 1350x310. -------------------------- I've tried controlling it with CSS telling it to be a particular size at a certain screen width, but it doesn't seem to have the desired effect. I picked a crazy pixel width to make the results obvious. The current state is sort of random. @media screen and (max-width: 1920px) { .header-title-logo img { max-height: 53.5px; } and an attempt to match the vertical alignment @media screen and (max-width: 1920px) { .header-display-desktop .header-title-logo { margin-top: -30.1px; } } Edited October 24, 2023 by jbellissimo Clarity
Ziggy Posted October 24, 2023 Posted October 24, 2023 I wouldn't recommend using negative margins when possible, it's never a good way to position anything. Have you tried using an rem value for the height which would tie it to the font size, or maybe a vw if you want it to scale based on the width? .header-title-logo img { max-height: 3rem; } 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
jbellissimo Posted October 24, 2023 Author Posted October 24, 2023 I'm not totally sure I understand whether this code is meant to control the margin, which you commented on most recently, or to the original post. In the meantime, I'll drop it in and see the effect it has.
jbellissimo Posted October 24, 2023 Author Posted October 24, 2023 (edited) OK. I see what it's doing, and I think I like it. Is there a recommended "Logo Height" in the Squarespace Global settings for Site Title & Logo? Understood regarding negative values in the margin. Given that advice, what's a good way to make the logo and menu text appear that they're sharing the same baseline? As it is, they don't seem to relate: I tried padding the image early in the process to control vertical alignment, but that was a bust. Edited October 24, 2023 by jbellissimo added screengrab
jbellissimo Posted October 26, 2023 Author Posted October 26, 2023 On 10/24/2023 at 12:07 PM, Ziggy said: What height do you have the logo set to currently in the header settings? My apologies - I totally missed this very specific question. It's currently set at 20, but I believe it was set at 50 when I first posted my question. Thanks!
Ziggy Posted October 26, 2023 Posted October 26, 2023 (edited) Try setting it to 3rem instead of 20px, this can be typed in. Edited October 26, 2023 by Ziggy 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee?
jbellissimo Posted October 26, 2023 Author Posted October 26, 2023 5 hours ago, Ziggy said: Try setting it to 3rem instead of 20px, this can be typed in. Thanks for your help! I did this: Doing so made it "disappear," meaning it was probably small and invisible. Am I meant to use that in combo with your earlier suggestion of CSS? On 10/24/2023 at 2:09 PM, Ziggy said: .header-title-logo img { max-height: 3rem; } And then perhaps increment my way to match the nav menu text size using the CSS? Also, if not using negative margin controls, what's another way to adjust the vertical position of the logo/img to the nav menu? Padding or something like that? Again, I appreciate your help!
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment