Adding hamburger menu back to mobile screens

[relaxedguy]

When I first installed Magazine Pro, navigation on the iphone was handled by the horizontal-lined "hamburger" icon. Now that icon is gone and I'd like to figure out how to get it back.

I have a few CSS tweaks in place, but I did a compare and I haven't changed any of the @media only screen and (max-width: 1023px).

I would like to add a missing menu back to the (max-width: 768px)layout as well. I guess what I'm asking for is an explanation of how things like sidebars are moved to the bottom of the page on smaller screens and navigation is either displayed and then hidden at smaller screen sizes.

Thank you so much.

http://onlinedatingpost.com

[Marcy]

It looks to me like your CSS is using
.responsive-menu-icon

Try using:
#responsive-menu-icon
instead.

---

Marcy | Amethyst Website Design | Twitter

[relaxedguy]

Searching for .responsive-menu-icon I see three locations:

Should I change all of them to #responsive-menu-icon ?

.responsive-menu-icon {
	cursor: pointer;
	display: none;
	margin-bottom: -1px;
	text-align: center;
}

.responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}

.site-header .responsive-menu-icon::before {
	padding: 0;
}

.genesis-nav-menu.responsive-menu .menu-item,
	.responsive-menu-icon {
		display: block;
	}

[Marcy]

OK.
Info:
It looks to me like you updated your style.css, but not your responsive-menu.js.

The latest Magazine Pro theme Updated: 8/2/14
adds
<div class="responsive-menu-icon"><div>
using
/wp-content/themes/magazine-pro/js/responsive-menu.js

When I look at your source code, I see this:
<div id="responsive-menu-icon"></div>
Note the difference between "id" and "class"

So, two choices:
1. You can replace your /wp-content/themes/magazine-pro/js/responsive-menu.js
with the one from the 8/2/14 theme update.

OR
2. You can leave your .js the same as it is.
But then look in your current style.css and replace
each instance of
.responsive-menu-icon
with
#responsive-menu-icon
everywhere you find it.

Some in the navigation section and some in the @media section

---

Marcy | Amethyst Website Design | Twitter

[relaxedguy]

Thank you for these suggestions. I updated the responsive-menu.js file.

I compared my styles.css and functions.php with fresh copies, they are almost identical (I made a few small tweaks).

Now the issue is that the hamburger doesn't show up in the navigation area at mobile sizes. I can click the dark band across the page and the menu opens downward correctly. But with no hamburger icon, not clear how to get to the menu.

[Marcy]

It's there; it's just not white. 🙂

Find this code:

.responsive-menu-icon::before {
	content: "\f333";
	display: inline-block;
	font: normal 20px/1 'dashicons';
	margin: 0 auto;
	padding: 10px;
}

and add
color: #fff;
to it.

---

Marcy | Amethyst Website Design | Twitter

[relaxedguy]

That fixed it, thank you. It's strange that my default install style.css has different settings than what people are mentioning here. It didn't have the color: #fff; for example.

[Marcy]

That's great that your menu is working now!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts