Jump to content

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

Recommended Posts

Posted

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

  • Replies 8
  • Views 2.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted

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?

Posted (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 by jbellissimo
Clarity
Posted

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?

Posted

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.

Posted (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:

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

Posted (edited)

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!

📈 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?

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

 

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.