Moving mobile menu down

[brettfish]

I have a site with a customized header - where the logo has a specific height to it, and overlays the first section. When the mobile menu (hamburger) button is clicked, the mobile menu drops down, but it’s resting on top of the logo due to the height. The header is universal across the site, so I’d like to move the mobile menu down, so the first item displays below the logo.

Site URL

https://stradebianchewines.com/

[ruenel]

Hello @brettfish,

Thanks for writing in!

I have inspected your site and I found that you have added this custom CSS:

.x-navbar .x-brand.img {
    position: absolute;
}

Please have it updated and use @media query so that the code will only affect larger screen sizes. Perhaps you can use this sample code:

@media(min-width: 979px){
  .x-navbar .x-brand.img {
    position: absolute;
  }
}

The code above that serves as an example will only take effect when the screen size is greater than 979 pixels. Feel free to make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
CSS Media Queries - https://goo.gl/L3ZHNg

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Best Regards.