-
Notifications
You must be signed in to change notification settings - Fork 221
Description
The Issue
The navbar currently hides child links, other than the brand, in a burger menu for mobile devices. Once the burger menu is clicked, it is supposed to open a menu with all of the previously hidden links. However, in Firefox, the burger menu toggle doesn't open the menu:
Image of burger menu that doesn't open in FF
It works great for Chrome, but it doesn't work in Firefox. I have tested in both the Responsive Design Mode in the desktop version of FF and on standard FF for my phone.
If you apply the checked attribute to the hidden input[type=checkbox]
that papercss uses, then the menu opens like it should:
Image of opened burger menu in FF after applying checked attribute
Currently, the way papercss does the navbar is by having a hidden input[type=checkbox]
followed by a label that has a for attribute naming the checkbox input, except the label is inside of a button:
<input id="collapsible1" type="checkbox" name="collapsible1">
<button>
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
</button>
This seems to mean that FF doesn't accept label[for=checkbox]
s being located inside of button
s.
To reproduce
Go to the navbar documentation site (https://www.getpapercss.com/docs/components/navbar/) in Firefox mobile.