Mobile Header Covers Logo

Mobile

- 7 years, 8 months ago EngeniousDesign
  Participant
  
  Expired
  When in portrait mobile mode, the menu icon (hamburger) is sitting on top of (in front of) my header logo image, as shown in image below. Is there someway to fix this?
  
  This topic was modified 7 years, 8 months ago by EngeniousDesign.
- 7 years, 8 months ago Mirela
  Participant
  Hello,
  
  Please add this code into your custom css box:
  
  @media (max-width: 480px){ #logo { width: 88% !important;} #logo img.dark { width: 100% !important;} }
  
  Let us know.
  
  Best regards!
- 7 years, 8 months ago EngeniousDesign
  Participant
  
  Expired
  
  Thank you! That worked, kind of. It seems to have just squished the width of the logo – it didn’t preserve the aspect ratio. Is there a way to do that?
- 7 years, 8 months ago Mirela
  Participant
  Hello,
  
  First of all, do not put the custom css for the logo in the home page’s custom css. If you do then it will affect only the home page. While all other pages will have the large logo version.
  I edited out the code to this:
  
  @media (max-width: 480px){ #logo img.dark { width: 100%; padding-left: 30px !important; } }
  
  I added it in the General Options > Custom Css box. So it will affect all pages. Please check your site.
  Let us know.
  
  Best regards!
- 7 years, 8 months ago EngeniousDesign
  Participant
  
  Expired
  Thank you very much for helping me locate the overarching CSS location. I knew it had to exist!
  However, when I look at my other pages, the menu is still hovering over the logo.
  
  This reply was modified 7 years, 8 months ago by EngeniousDesign.
- 7 years, 8 months ago EngeniousDesign
  Participant
  
  Expired
  
  It’s working now! Thank you
- 7 years, 8 months ago Mirela
  Participant
  
  Great!
  After every css change make sure to clear cache and refresh pages. This way they will load with the new changes.
  
  Best regards!
- 7 years, 7 months ago EngeniousDesign
  Participant
  
  Expired
  Sorry to come back to this, but can I move the hamburger menu further to the left? I’m looking for more space in between the logo and the menu as I’ve accidentally hit the logo instead of the menu a couple times.
  
  I’ve been trying to play with the padding in the CSS code, but nothing is moving (even after I clear my cache).
  
  thank you
  
  This reply was modified 7 years, 7 months ago by EngeniousDesign.
- 7 years, 7 months ago Mirela
  Participant
  Hello,
  
  Please edit the last code to this:
  
  @media (max-width: 480px){ #logo img.dark { width: 100%; padding-left: 30px !important; } .mobile_small_menu { margin-left: -18px !important; } }
  
  We added this code: .mobile_small_menu { margin-left: -18px !important;} inside the mobile block (@media 480px). Edit the value to your wish.
  
  Best regards!