响应式菜单不适用于小屏幕

Question

I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.

1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.

2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.

Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/

Answer 1

You need to use the js detection that the example uses.

1. Add class="no-js" to your body element.
2. Then on load, set document.body.className = "js" (or equivalent).

This will enable the menu.

For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).

Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).

Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/ . You still have some css issues, but I assume you can fix them yourself.