[Support request] Resize navigation logo

[April]

I’m looking for a way to have the logo in line with the menu, the logo to be the same height as the menu container, and the menu items to be aligned to the top or bottom of the container. I’ve tried a few ways and not getting it to work.

What I’ve tried:
Logo graphic under site identity. I’ve tried multiple files and file types and the graphic always shows as a question mark. Even if it did work, I’m not sure how to resize the graphic.

Logo graphic in the navigation Logo (customizing – primary navigation – navigation logo). The graphic looks too small unless I have the menu height at 130 or more and it’s still not filling the container. I’m guessing this isn’t the best way to do what I’m trying to but it’s the only way I can actually see the graphic.

Logo graphic in the header (customizing-layout-header) with header location set to “inside content area”. The logo isn’t showing up at all.

[Tom]

I think the Navigation Logo route is your best bet. If you want to add it and let me know, I should be able to increase the size with some CSS for you 🙂

[April]

CSS would be great – thank you! I’ve got the Navigation Logo back in.

[David]

Hi there, you can remove the padding from the Logo image which will make it fill the navigation bar with this CSS:

.main-navigation .navigation-logo img {
    padding: 0px;
}

[April]

Much better. Thanks! Could you help me with CSS to move the menu? Let’s say to the bottom of the container.

[David]

Could you make the navigation height smaller to say 60px (or something that suits you), ill then give the code to make the logo larger.

[April]

Ok done!

Also, do you know why the logo wouldn’t be showing for mobile?

[David]

So this CSS:

@media (min-width: 768px) {
    .main-navigation .inside-navigation {
        position: relative;
    }
    .main-navigation .inside-navigation .main-nav {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 150px;
    }
}

No logo on mobile, in the Customiser > Layout > Header – you have the mobile header selected which has its own logo space. Just add your logo there.

[April]

I’m not seeing any change using that CSS (I’ve tried changing min-width amount and left px amount as a test and those aren’t changing anything)

[Tom]

For some reason your logo is showing as a broken image for me. Is it supposed to be a .tiff file?

[April]

It’s tiff. It’s odd – it doesn’t show a preview in my library but it works when I view the page. I checked on a couple devices and it was visible.

I switched it to a png so see if that changes anything…

[Tom]

What if you just add this CSS?:

.main-navigation .navigation-logo img {
    height: auto;
    max-width: 200px;
}

[April]

Aha! I can tweak it from that. Thank you.

Last thing – The logo is pretty small on mobile. Is there CSS to resize that?

[David]

Hi there,

you can use the same properties but applied to the mobile header:

.mobile-header-navigation .site-logo.mobile-header-logo img {
    height: 80px;
}

[April]

I’m not seeing a change using that code (checked on 2 devices)

[Author]

Posts