[Solved] Responsive Nav with Menu Button

[izaac]

Purpose
I’ve attempted to make a responsive menu bar with a “menu” toggle button at smaller screen sizes. I have concluded I’m not quite smart enough to combat this issue alone.

Requirements
– IE 10 at a minimum (preferably IE 9)
– Chrome/Moz/Webkit
– Android/iOS browser support (including Android devices from 3 years ago)
– Keep the HTML structure for the UL as simple as possible for maximum flexibility if in the future I use a CMS platform like WordPress.

I have tried:
– jQuery show/hide basic implementation using tutorial on W3Schools. http://www.w3schools.com/jquery/jquery_hide_show.asp. This however made both the nav menu and the nav menu toggle button disappear when I re-sized the browser from a small width to a large width.
– Checkbox Hack mentioned in a CSS-tricks article. This, as described in the article, doesn’t support many mobile devices. https://css-tricks.com/responsive-menu-concepts/
– Responsive Nav from http://responsive-nav.com/ which breaks my nav bar’s layout more than it fixes it. I have incorporated it into my code but I have commented the class that enables it.

Apologies for the mess
If my code is too messy right now, let me know and I will see what I can do to reduce things down to the pure essence. Right now the CSS could be reduced by a lot, but I’m afraid of that limiting my options when I’m trying to diagnose issues at different screen sizes.

My Codepen
I can’t figure out how to get this to embed

http://codepen.io/izaacpost/embed/vNpGXL

[miguelzuleta]

Are you trying to just add a hamburger menu on mobile that toggles the display of your menu?

[izaac]

Yes, although I already found a solution. I wrote my own jquery script to handle it. How do I mark this question as resolved? Tomorrow I plan on uploading the code as the solution was pretty simple once I figured it out. Maybe someone else would find it helpful, who knows.

[Author]

Posts