Make a different logo for mobile

Support
#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.

#21

That made it smaller before you scrolled. I need it smaller when you scroll down thats when is goes into two lines.

#22

Hi there,

I see, if that’s the case, you need to add something like this

@media(max-width: 1360px){
 .x-navbar-fixed-top  .x-brand img {
    max-width: 150px !important;
  }
}

This should do it.

Thanks!

#23

Awesome Thank you!!

#24

You are most welcome. :slight_smile:

#25

So we went live with our site and I just looked at it on a Samsung and the logo on the menu bar is not showing.

#26

Hi there,

Thank you for the update. Make sure you’re using the updated URL for the logo image. Can you please share the live site URL so we can take a look?

Thanks!

#27

You where right I needed to change the image URL. Thank you

#28

Glad we could help.

Cheers!

#29

I am having a problem with the menu on my iPhone. It’s like the logo is going over it because every time I click the menu button it reloads the home page as if I’m click on the logo and not the menu bar icon. https://outdoordogsupply.com

I had to take change the code to

/Make the Logo on Mobile Different/

@media (max-width: 767px){

.x-brand img {
display: none;

}
.x-brand {

    background: url(https://outdoordogsupply.com/wp-content/uploads/2017/08/Outdoor-Dog-Supply-Logo-Mobile-1.jpg) center center no-repeat;
    background-size: cover;
    width : 85%;
}

}

So the menu would work for the weekend but I need the logo up there and the menu to work.

#30

Hello There,

This issue occurred because of this custom css:

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

You will have to update it and make use of this code:

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

@media (max-width: 767px){
  .x-brand img {
    max-width: 90% !important;
    width: 85% !important;
    opacity: 0;
  }
}

Please let us know how it goes.

#31

Thank you that work perfectly.

#32

Thanks for letting us know