Reply To: Responsive Menu Goes MIA

The reason that’s happening is because of line 4416. It adds display: none; to the menu, which is supposed to hide it. That particular code is there because it’s supposed to hide the regular menu and replace it with the mobile version (the hamburger style icon that you see in the demo when you resize the browser).

This can be easily fixed if you go through and change the 3 parts of the css that say #responsive-menu-icon and change it from an ID to a Class instead like this – .responsive-menu-icon

You can go to the Responsive Menu section on line 2501 and change them both to Classes like this –

/* Responsive Menu
--------------------------------------------- */

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: 10px;
}

.responsive-menu-icon::before {
	color: #333;
	content: "\f333";
	font: normal 32px/1 'dashicons';
	margin: 0 auto;
}

Just replace the 2 #‘s with a . instead.

Then change the # on line 4420 like this –

	.responsive-menu-icon {
		display: block;
	}

Once you do those 3 steps the Mobile Icon will show up and your site will look like this – http://i.imgur.com/FQBXYie.png

If however you don’t want to use the Mobile Icon, then you can remove the display: none; code I mentioned on line 4416

You may already know some of this, but I thought I’d explain just in case it can help someone else if they run into the same issue.

You may want to have your logo center while your site is being viewed on mobile/tablet devices. If so, just add this to your 1023px responsive section –

.site-header .site-title a {
	background-position: center !important;
}

You can add the above code under line 4272 inside this section –

/* iPads (portrait)
--------------------------------------------- */

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

Let me know if this fixes everything.