Responsive Menu Goes MIA

Are you using the latest version?

I’ve built a lot of sites with the same Theme you’re using and haven’t run into that issue. I think it’s because they added the Responsive Menu Icon in version 1.4.1 and you’re using an older version which probably doesn’t show it.

If you’ve made customizations to your CSS and your Site, then you can’t upgrade to the latest version since you made modifications to your site which would override all the work that you did…….you’ll need to adjust each part of the theme you adjusted to get everything working….(shouldn’t take that long).

The latest version shows the Responsive Icon when being viewed on a Mobile Device…..Example – http://demo.appfinite.net/epik/ Resize or View that link on a mobile device to see that it works perfectly on mobile phones.

Just let me or anyone else know what’s missing.

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.