Skip to content

Navbar burger menu doesn't toggle in Firefox #173

@Tentacular261

Description

@Tentacular261

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 buttons.

To reproduce

Go to the navbar documentation site (https://www.getpapercss.com/docs/components/navbar/) in Firefox mobile.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions