Mobile Menu Toggle Off Center at 100% Width??

  • Resolved 2xUeL

    (@2xuel)


    9 years, 4 months ago

    Hello everyone. I can’t seem to figure out what the heck is going on with my menu toggle on both Safari and Chrome my iPhone 5S. For a while now, it’s been at 75% width because whenever it’s at 100% (or even something in between 75% and 100%) it shifts the entire page over to the left a little when the menu is toggled open, making the whole page off-center. Can anybody figure out what’s going on?? My website is https://dgmono.com. Oh by the way it doesn’t do this in the desktop version of Chrome, perhaps because the page can’t get as narrow as it does on my phone…?

    Also, here’s what my modified CSS is for the mobile menu toggle:

    @media screen and (max-width: 639px) {
	.menu-toggle {
		width: 100%;
		padding: 9px 0 9px 0;
		font-size: 14px;
		text-transform: uppercase;
		margin-top: 12px;
	}
}

    (Note that as I’m working on this it may show up to you on your phone as either 75% or 100% width.)

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter 2xUeL

    (@2xuel)

    I’ll say something else about it: sometimes, perhaps when the cache/cookies are cleared on my phone, the page will open with everything centered but then once I open the menu the page shifts off-center and stays that way, even after I refresh…??

    Thread Starter 2xUeL

    (@2xuel)

    And just like that, I figured it out:

    On line 604 of the original TwentyTwelve CSS file, the display mode was set to inline-block. I changed it to block (under a media query in my child theme CSS file) and it fixed it. ??

    @media (max-width: 639px) {
	.main-navigation ul.nav-menu.toggled-on,
	.menu-toggle {
		display: block;
	}
}

    This must have changed during an update at some point because several months ago it wasn’t a problem. Hope this helps someone out!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Mobile Menu Toggle Off Center at 100% Width??’ is closed to new replies.