Site logo

Archived topic

Make Mobile Menu Logo Different Image Than Desktop Menu Logo

3 replies · Started by Rylan Urban on September 24, 2016

Viewing posts 1–4 of 4

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

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

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!

You're welcome :)

This archived topic is closed to new replies.