Logo in Mobile Menu and Sticky Header Tiny

[Eugen]

Hi,

I’m trying to add a logo for the sticky menu and logo, but it show so tiny I almost can’t see it.

What am i doing wrong?

Best regards
Eugen

[Tom]

The menu logo resizes to fit inside your navigation, so if your navigation isn’t very tall, the image will be very small (that rhymes).

You can adjust the height with some CSS:

.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 40px;
}

Hope this helps 🙂

[Eugen]

Ok thanks, will try that out.

[Tom]

No problem 🙂

[Heath]

Tom, my sticky menu logo got tiny too. I’m not sure when it happened, but I just noticed it.

I fixed the size with CSS, but now the positioning is off. It’s justified to the bottom. I tried increasing “margin-bottom” but that didn’t work.

Thanks. Hope your kiddo is doing great!

[Heath]

PS – I added a negative px margin-top, which worked, but doesn’t seem like the best fix.

[Tom]

The menu logo will set itself to the height of the menu – 10px (for spacing).

You can alter it with CSS.

Can you show me your site so I can help with the CSS? 🙂

[Heath]

No problem, I made the logo full height (35px) and took out the spacing (margin-top = -10px).

But, the default setting with no CSS makes the logo too small and justified too far down.

Website is in my signature: http://www.dadkingdom.com

If you want, I can remove the CSS so you can see what it looked like at default.

[Tom]

Instead of the negative margin, you can do this:

.sticky-menu-logo .main-navigation.navigation-clone .sticky-logo {
    padding-top: 0;
}

[Heath]

Great. Thanks!

[Tom]

You’re welcome 🙂

[Author]

Posts