Make a different logo for mobile

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