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

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

What height do you have the logo set to currently in the header settings?

Can you share your website URL?

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;
}
}

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; 
}

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.

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.

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!

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

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!