Problem with Double Hamburger Menu on IOS

[christine-thompson]

Hi, I'm using the hamburger icon for the primary navigation button on http://www.informing-arts.biz. It appears to work just fine on desktop browsers, and on an iPad in landscape orientation.

When you access the site from an iPhone, or from an iPad in portrait orientation, you see a duplicate hamburger icon after you click the main navigation "hamburger."

What should be changed in the stylesheet to correct this problem?

http://www.informing-arts.biz

[David Chu]

Christine,
That's an interesting little problem. You want that hamburger on larger screens, but not on small screens because the upper hamburger does the job there. So you don't want to just vanish the first one everywhere, but only on narrow screens. Here's a bit of code for your style.css to do just that.

@media only screen and (max-width: 800px) {
	.dashicons-menu:before {
		content: "";
	}
}

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[christine-thompson]

David,
You present what appears to be an elegant solution; unfortunately, it didn't solve the problem.

Here's the code I found in Altitude Pro's stylesheet that appears to pertain to responsive menus. Would you suggest any changes given this code?

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

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

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

.nav-secondary .responsive-menu-icon {
margin: 10px auto 0;
}

/*

[David Chu]

Hi!
I believe I erred on this. Please try this instead. It simply vanishes it at the lower size rather than changing the content.

@media only screen and (max-width: 800px) {
	.dashicons-menu:before {
		display: none;
	}
}

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[christine-thompson]

We're not there yet (so I've turned off this change.) It did not eliminate the second hamburger icon or change the nav menu on mobile devices; however, it did shrink the title banner for all pages except the front page (the name for the home page in this theme.)

I'm not an expert with CSS, but I keep wondering if the fix lies somewhere in the theme's reference to ".responsive-menu-icon" — as explained in this post: http://www.basicwp.com/replace-hamburger-with-word-menu-in-genesis/

[David Chu]

You're totally in the right area. I'm missing it probably because I'm using web dev tools rather than being in there. It's not a hard fix for someone like me. My code examples likely aren't specific enough to cover all situations.

Normally at this point I'd say you have a direction to investigate. I feel frisky today, though. If you'd like to write me and give me a WP login, I will go in there and just fix it for you, no charge. 🙂

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts