The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Responsive Nav with Menu Button

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #209938

    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.

    – 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. 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.
    Responsive Nav from 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


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


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.