[raisethebarrParticipant]

My website http://www.ecokarma.net is using the ‘inline’ header layout. The way the logo image looks it makes sense to have it inline. However, I prefer the menu on mobile appearing below the logo image (like it looks with the stacked layout). I’ve looked at the other questions but can’t seem to get the right css tweak to make this happen. Thanks in advance for your help,

Benjamin

[DarshanaModerator]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

@media (max-width:979px){
  .x-btn-navbar {
    width: 100%;
    display: block;
  }
}

Hope that helps.

[raisethebarrParticipant]

Hi, Thanks for your quick reply! This definitely fixed the issue now it is displaying beneath the logo image.

However, it is now stretched across the entire mobile view (width = 100%). I tried to changed width to 20% then margin: 0 auto but I can’t get it centered. Is there a way to make this still appear as a button and have it centered under the logo image?

[LelyModerator]

Hi There,

You’re welcome!
Please update above CSS to this:

@media (max-width: 979px){
.x-btn-navbar {
    display: inline-block !important;
    width: auto;
    margin: 16px auto 13px;
    float: none !important;
}
}

Hope this helps.

[Author]

Posts