Jump to content

Sizing a logo (img or svg) relative to header navigation text size

Recommended Posts

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.

1440x716.thumb.png.5196d93f6e580dd0282b682b8d84adf8.png

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.thumb.png.fb04bbb37b95f4b218c420ab7a3433c9.png

1920x1080 - logo slightly smaller

and

1024x1366.thumb.png.f638310bc6f73bf0cfb246dad34af295.png

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

Link to comment
  • Replies 8
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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 by jbellissimo
Clarity
Link to comment

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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:

ScreenShot2023-10-24at3_08_22PM.thumb.png.9e34892bc4dbdc40062fed4a64af21f8.png

I tried padding the image early in the process to control vertical alignment, but that was a bust.

 

 

Edited by jbellissimo
added screengrab
Link to comment

Try setting it to 3rem instead of 20px, this can be typed in.

Edited 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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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:

ScreenShot2023-10-26at8_40_13AM.thumb.png.6ec64f549bb5b95041ce723b4c306e17.png

 

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!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.