Hide Logo when on mobile

Ask the Community Get Answers
1

Hello all,

we’ve recently installed a new logo for our app. Its much wider than the old one. No problem on desktop or tablet, but on mobile, it appears to cover over the burger menu, so I cant access anything other than one top level option.

Anyone got an idea or a code snippet that will hide the logo on pages when displayed on mobiles.?

Cheers

Neil

2

Hi @NeilParkin60970, this CSS snippet should do the trick:

/* Hide elements on mobile */
@media only screen and (max-width: 767px) {
  
/* Hide the header logo */
  .knHeader__logo {
    display: none;
  }
  
}

Hope that helps!

1 Like
3

Perfect.! Thanks Stephen

Neil

4

No problem! If you’re satisfied with that, please mark this as the solution. :slight_smile:

6

You can reduce the width and keep the logo as well by adding the desired width on media.