Menu Not Showing on Mobile – 2012 theme

Hey there,

Looking at the code it disables for screens smaller than 600px, the iPhone being one of those.

You’ll not that it’s enabled for:

@media screen and (min-width: 600px)

So we could reverse that like:

@media screen and (max-width: 600px) {

	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
}

You’ll need to test this to see how responsive and well it will work on devices smaller than 600px.

Another option would be using Jetpack, that has a mobile theme included in there which is pretty sweet:

https://www.ads-software.com/plugins/jetpack/

Hope this helps.

Take care.

Hey,

Thanks. That actually brought back the menu (but the same as it appears on a destop). The right side is still showing some of the background.

Also,

My site https://tryroyalcrown.com with the same theme does not have this problem

I’ve just noticed on your first site that you made a child theme and essentially copied all of the originals CSS include the full comments header. You shouldn’t do it like that.

You should do like you did on your second site.

Looks like there is something in your child theme messing up there. Once corrected let me know.

Take care.

Thanks for noticing that. I believe I have fixed the child theme style.css file. I am still getting the same problem, even when I switch back to the parent theme. Thanks, Timothy.

Hey again,

Out of interest what occurs when you pop this into your child theme:

.assistive-text,
.site .screen-reader-text {
	position: initial !important;
}

Take care.

That fixed the problem perfectly. You’re awesome. Thanks for your help