Different logo on mobile

[travwaite]

The main page logo doesn’t work on mobile devices so I’m trying to work out how to get a different logo in the header when viewed on mobile devices.

I’ve found a previous post on this forum (http://support.swiftideas.net/forums/topic/mobile-header-2/) so I’m assuming it’s possible, but I’ll need a little help to make it happen. Is there a simple css fix?

Thanks

[Kyle – SUPPORT]

You will need to use this css:

@media only screen and (max-width: 480px) { 
#logo img {
display: none!important;
}
#logo {
background: transparent url('http://dante.swiftideas.net/wp-content/uploads/2013/10/[email protected]') no-repeat center left;
background-size: 92px 21px;
width: 92px;
}
#logo a {
height: 40px;
color: #fff;
}
}

You will need to change the image path to the one of your image, and also change any widths and height properties to the size of your logo

– Kyle

[travwaite]

Thanks Kyle. A few more things:

1. I managed to get the logo up, but for some reason part of it is cut off. Any fixes for that?

2. How would I link the logo back to the home page?

3. I need to get the menu icon to align left of the logo and the cart/search to align on the right. Hopeful of some simple css fixes!

Appreciate the help!

The web address is http://www.topdrawerlingerie.com.au and should divert to /mobile on handheld devices.

[Kyle – SUPPORT]

1) You need to adjust the background-size to fit your image

2) It should already do so?

3) Unfortunately this layout is not possible, we only added this to our latest theme Cardinal

That link doesn’t seem to be using our theme?

– Kyle

[travwaite]

Sorry, link is http://dev.topdrawerlingerie.com.au

1. So I’ve got the logo to full size, but need to fix the padding top/bottom of logo and top/bottom of menu/search/cart icons to get it aligned and cancel out excess white space.

2. The logo has no link.

[Kyle – SUPPORT]

1) Add this:

#logo a.show-main-nav, #logo a.mobile-cart-link, #logo a.mobile-search-link {
  padding-top: 15px;
  height: auto;
}

2) Apologies, the link will not work on mobile

– Kyle

[travwaite]

Thanks Kyle. That’ll do me.

[Kyle – SUPPORT]

No problem

– Kyle