Community Forums › Forums › Archived Forums › Design Tips and Tricks › Problem with Double Hamburger Menu on IOS
Tagged: hamburger menu, responsive menu
- This topic has 5 replies, 2 voices, and was last updated 8 years, 4 months ago by David Chu.
-
AuthorPosts
-
November 16, 2015 at 4:54 pm #171309christine-thompsonMember
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.bizNovember 18, 2015 at 8:49 am #171410David ChuParticipantChristine,
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
November 18, 2015 at 10:31 am #171420christine-thompsonMemberDavid,
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;
}/*
November 18, 2015 at 10:47 am #171423David ChuParticipantHi!
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
November 18, 2015 at 10:59 am #171427christine-thompsonMemberWe'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/
November 18, 2015 at 11:19 am #171429David ChuParticipantYou'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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.