Make a different logo for mobile

Support
#1

Hey I would like to make the mobile logo different then the logo on the desk top. How can I do this. Our website is http://vps28450.inmotionhosting.com/~outdoordogsupply/ The logo I am talking about is the logo in the top left hand corner. The only reason I am looking to do this is because right now on the mobile version the logo bumps down the 3 line which cuts off park of the page when you scroll down and then scroll back up. If I can not have a different logo can you help me make it so it dose not cut off part of the page on the mobile when your scroll down and then scroll back up to the top.

Thank you in advance.

#2

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
    .x-brand img {
        opacity: 0;
    }
    .x-brand {
        background: url(http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/06/Outdoor-Dog-Supply-Logo.jpg) center center no-repeat;
        background-size: cover;
    }
}

Replace the http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/06/Outdoor-Dog-Supply-Logo.jpg URL with your image URL for the mobile version.

#3

So when I did this it changed the image but still the menu lines were bumped down. How can I make the menu lines set next to the logo? Not bellow. Like they are now.

#4

Hey @odsadmin,

Add width: 85%; in .x-brand class just after background-size and check.
For example.

 .x-brand {
    background: url(http://vps28450.inmotionhosting.com/~outdoordogsupply/wp-content/uploads/2017/06/Outdoor-Dog-Supply-Logo.jpg) center center no-repeat;
    background-size: cover;
    width : 85%;
}

Let me know how it goes!

Regards

#5

Perfect!! Thank you!!

#6

You are welcome!

#7

I just saw that on an iPad the logo looks funny. Can I have the same logo that shows on the desktop show on the iPad?

#8

Hi again.

Just change the media query width from 979 to 767 for example:

@media (max-width: 767px) {
    ...
}

Hope this helps!

#9

Is there a way to make the mobile menu show on smaller laptop screen. Right now the menu tabs down under the logo on my laptop and makes the menu really big and cover up part of the slider.

#10

Hello There,

Thanks for writing in! It could be possible using a custom css. You can make use of this code:

@media(max-width: 1350px){
  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in {
    display: block;
  }
}

Regretfully it might lead to other issues like mobile menu not showing and other things which we can no longer control since this is a customization.

I would highly recommend that if possible, resize the logo image and the navbar container instead by using this css code:

@media(max-width: 1350px){
  .x-brand img {
    max-width: 250px;
  }

  .x-navbar .x-container.max {
      width: 96%;
  }
}

Hope this helps. Kindly let us know.

#11

Awesome. Thank you!!

#12

You’re welcome.

#13

One more thing. When you scroll down the menu bar stays sticky but it goes to two lines on my lap top. How can I change that. I have code so the icon changes sizes when you scroll down. But for some reason on my laptop it still bumps into two lines.

#14

Hello @odsadmin,

Can you please share screenshots as I am unable to replicate on my end?

Thanks.

#15

It’s only when you shrink the page to a certain size. My lap top it not a very big screen but not too small either. I have attached an image.

#16

#17

Also the mobile menu is cutting off part of the logo on the iPhone 6. What size should the logo be so it works on all mobile devices.

#18

Hi,

To fix it, you can add this in Custom CSS

@media(max-width: 1065px){
  .masthead-inline .x-btn-navbar {
    display: block;
    float: right;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

 .x-nav-wrap.mobile {
    display: block;
  }

  .x-nav-wrap.mobile.collapse {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in {
    display: block;
  }
}

@media (max-width: 767px){
.x-brand {
    background-size: contain;
    background-position: top left;
}
}

Hope that helps.

#19

So thank you that did help with the phone menu. But I am still having trouble with the menu dropping down on my laptop.

#20

Hi there,

You should change this CSS and lower the max-width value, like 150px

@media(max-width: 1350px){
  .x-brand img {
    max-width: 250px;
  }

  .x-navbar .x-container.max {
      width: 96%;
  }
}

Then change the 1350px and match it with your laptop’s screen width. I think it’s 1360px if it’s MacBook Air.

Hope this helps.