Docs

[Frocreate]

Hi all, I have my navbar set to inline but, because my logo is a bit wide, Id like to have the logo and hamburger menu stacked and centered when on mobile. Also, what CSS do I need to target in order to change margin and padding on the menu and/or icon on mobile view?

Thanks!

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks

Joao

[Frocreate]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! To resolve this issue and switch the inline navbar to stacked position, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (max-width: 979px){
  .masthead-inline .x-btn-navbar {
    display: inline-block;
    float: none;
    margin-bottom: 20px;
  }

  .masthead-inline .x-navbar {
    text-align: center;
  }
}

Hope this helps. Please let us know how it goes.

[Frocreate]

That did the trick – thank you!

[Joao]

Glad to hear it 🙂

Let us know if we can help with anything else.

Joao

[Frocreate]

After making this change and removing the topbar on mobile, I noticed a few weird things when I tested on iPhone:

• The page name appears in the header above the logo
• Instead of a hamburger icon, it now reads “navigation”
• Four blockgrid items are no longer centered
• “Contact Us” link icons have disappeared

Thanks in advance for your help!

[Nabeel A]

Hi there,

I checked your site and everything seems to be displaying fine on my end, Can you please clear your mobile browser’s cache and check the site again?

Let us know how this goes!

[Author]

Posts