Mobile Menu + Header Background Stuck on White

Thanks for using Author!

It looks like there have been some customizations made to the theme. Normally, the background is dark gray for both the desktop and mobile version.

If you re-install the theme, it will override any changes made and the background will then be dark gray again.

Hi Ben,

I did a complete deletion and reinstall of the theme and it is still showing the white background and menu on the mobile version.

Hi Ben,

I did a complete deletion and reinstall of the theme and it is still showing the white background and menu on the mobile version. Apparently, it’s just in Firefox on my mobile but in Chrome it is working right.

• This reply was modified 1 year, 1 month ago by roisindhu.

Thanks for trying that.

It looks like the cache just needs to be cleared now. If you have a caching plugin installed, try emptying the cache there. You may also have to clear the browser cache on your phone, and then it will revert to the dark gray design.

It’s working now, thanks! Now that I can see it I have a questions. Is there a way to center the icon on the mobile version without centering the menu links?

Glad to hear that!

It looks like you have the logo almost centered already, but if you add this CSS too, it will make it line up perfectly with the menu:

.toggle-navigation {
  position: absolute;
  right: 7.4%;
}

Please copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

Thanks, Ben. However, what I want is for the menu items to be flushed on the left side while the logo remains centered. The code you gave me didn’t work for that.

Thank you so much for your help. I greatly appreciate it.

Okay got it. Add this code too and it will move the menu back to the left:

.site-header .menu-primary {
  text-align: left;
}

That works perfectly! Thank you so much. ??

You’re welcome! Stay in touch if you need anything else, and I’ll be happy to help.