[Resolved] Make Mobile Menu Logo Different Image Than Desktop Menu Logo

[Rylan Urban]

Hey Tom,

I have an issue,

the menu logo for desktop on http://solarsellmarketing.com is awesome.

But when I view it on iphone 5s, the logo takes up so much space that it pushes the menu down a line and makes the menu bar look strange.

Can I simply change the image i use for mobile? Like for example – I’d just insert my site icon instead so there would be room.

Rylan

[Tom]

You’ll need to reduce the width of your image at whatever breakpoint is necessary.

For example:

@media (max-width:500px) {
    .main-navigation .sticky-logo, 
    .main-navigation .sticky-logo img {
        width: 80px;
        height: auto;
        margin-top: 7px;
    }
}

[Rylan Urban]

Thank you!!!

I’ve waited a long time to fix this. Glad I finally asked!!! Will be a part of every new website CSS going forward!

[Tom]

You’re welcome 🙂

[Author]

Posts