Design practicum help - Resize logo relative to nav bar height

[ap3xgh0st]

Hey folks, I'm brand new and working on my design practicum so bear with me please!

What I'm trying to do:

• Proportionally scale my logo according to the height of my nav. That's it.

What I've done so far:

• I've uploaded a square logo.svg in the content settings, 1000x1000px.
• I've created a global top-nav (1-col logo module and 11-col advanced menu module)
• I've set the top-nav height to 56px in my custom CSS

At first, I was expecting the logo image to automatically resize, but it didn't. The following are two attempts I tried to resize, but neither worked:

.logo {
    height: 100%;
    width: auto;
}
.logo {
    max-height: 100%;
    max-width: 100%;
}

 Any suggestions? Again, I want the logo image to become 56x56px, but I want it to happen by inheriting the height of the top-nav.

[Jsum]

@ap3xgh0st,

Height percentages don't really work like you would expect them to.

The first thing you should do is use your inspector tool to check the url and img markup for appended height/width or inline height/width.

If it exists then you will need to override it using important tags:

.logo {
    attribute: value !important;
}

This is most likely the issue.

Second you should consider using a smaller size to begin with. 1000px by 1000px is quite large. 

Third, instead of using height percentages you can do two things:

1. use static height on the image. You know how tall the nav will be at its full height, and you know how tall it will be when it shrinks. You can use javascript to apply a call to the image in the same function that causes the nav to shrink on scroll. Your original hieght would be full size and your scroll height would be the small height.

.logo {
    width: auto !important;
    height: 120px !important;
}

.logo.stick {
    width: auto !important;
    height: 75px !important;
}

2. you can try just forcing height and width auto:

.logo {
    width: auto !important;
    height: auto !important;
}

This might just fix your problem.

[ap3xgh0st]

Hey Jsum, I appreciate the response.

So I've been messing around with the solutions you provided (except the JS solution, I'm trying to avoid JS for the Design Practicum), but they don't seem to be working properly. Oddly enough, every time I try important auto for either attribute, it resizes to 400px (which is set in content settings).

This didn't even work:

.logo {height: 56px !important;}

Yet for some reason this did:

.logo {width: 56px !important}

However I don't really like this solution because the menu to the right of the nav now shifts left to fill in the gaps, which breaks the usual grid system. It seems hacky...

Quick general question: how common is it to target predefined classes/IDs which hubspot created in my own CSS? I'm not trying to hack this page together using flimsy tactics so I'm trying to determine what the best methods of apprach should be: aka, do I mess with classes I can't normally edit?

[Jsum · Accepted solution]

@ap3xgh0st,

It is common actually. If you ever look at a page that Hubspot built you will see that they do this. 

I just realized something for you though. You are most likely using an image, logo, or rich text module for your logo, correct? and you have added the custom class "logo" to this module?

If so, you are trying to apply your styles to the wrapper of the logo, not the logo itself. What you need to do is add to your css target:

.logo img {

}

[ap3xgh0st]

I feel slightly embarrased I didn't think of that before. It seems to be working now, thank you!