Is there an easy way to make Pico.css NAV responsive?

[bjazmoore]

I started playing around with making the NAV work responsively. I was able to hide the menu items and slap on a hamburger menu. Obviously I would need some Javascript to make the UL/LI menu items display as a stacked menu item. I thought about slapping an ASIDE tag into the NAV, but that does not seem to do what I want. My extra CSS and custom classes started getting really complex and I thought "this is not the Pico.css way".

Anyone have some examples? I can post my code if you want it.

Thanks

[walterdavis]

Why would you need JavaScript to change the list from horizontal (li set to display: inline) to vertical (li set to display: block)? That can live in your viewport-specific part of the CSS, along with the visible hamburger etc. Walter

…

On Apr 2, 2023, at 9:22 PM, bjazmoore ***@***.***> wrote: I started playing around with making the NAV work responsively. I was able to hide the menu items and slap on a hamburger menu. Obviously I would need some Javascript to make the UL/LI menu items display as a stacked menu item. I thought about slapping an ASIDE tag into the NAV, but that does not seem to do what I want. My extra CSS and custom classes started getting really complex and I thought "this is not the Pico.css way". Anyone have some examples? I can post my code if you want it. Thanks — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.

[bjazmoore]

In the past I have used javascript to inject a class that makes the menu items visible when the hamburger menu is clicked and the hides the by removing the class when clicked again. I am not aware of how to do that with just CSS. Regardless - what I see when attempting this is a stacked menu but the top item appears on the navbar and not right below it.

Thanks

[wwmoraes]

@bjazmoore you need neither JS nor an aside element for that:

nav, nav ul {
  flex-direction: column;
}

@media (min-width: 576px) {
  nav, nav ul {
    flex-direction: row;
  }
}

Here's a sample of it in action. This will make both the nav and its child ul elements to change the flow direction to column on narrow viewports 😉

Note that I used the latest version as of date (v2.0.6). It works for any version that sets display: flex to nav, nav ul .

As for the burger menu, you can create one with its toggling effect in plain CSS using a styled label + checkbox input + rules that depend on input[type="checkbox"]:checked. I applied this trick on my own website some time ago using the subsequent sibling selector (~) to target the menu. This trick requires the input to exist outside of the target element, as its previous sibling. A more modern approach (2023+) may have the checkbox within the menu container + :has() pseudo-class hiding menu entries/sections instead.

Here's another sample that contains the responsive nav, burger menu to toggle menu items on narrow viewports using the latter approach and some animations to make it smooth.

P.S.: Sorry to necropost, I only started using pico.css a week ago and I ended up looking for a potential pre-built way to enable this, leading me to this question and solution. Cheers!

[Yohn]

I just added a dropdown menu to the <menu> hamburger style element you got set up, and it looks like it worked just fine!

[wwmoraes]

Oh man, and you got a style guide! With your permission, I'd like to copy/paste that and bring it over to my fork I started working on a cheat sheet but didn't get as far as you have with your style guide and got distracted with one of the many projects going on.

Feel free to copy and use it: its MIT-licensed for that purpose 😄

The green and red colors in the meter, is that the same color as the <ins> and <del> / valid and invalid form elements?

The latter. Sub-optimal I picked the first yellow tone that fits (subjectively) in that color palette.

Have you tried added a dropdown component to the menu items?

I just added a dropdown menu to the <menu> hamburger style element you got set up, and it looks like it worked just fine!

Thanks for testing! I designed it without floats or absolute positioning precisely with the goal that it'd "just work" and "not break anything else". I'm glad to see it lives up to my expectations 😎

[mnordhaus]

Hey @wwmoraes I actually answered some of your concerns in this discussion about keeping Pico smaller.

Honestly, I do not think Pico needs a full row / column grid system at all, and I would like to try and incorporate the CSS grid-template to set the basic side panels in a template easily.

Most of the enhancements I've added to my fork I focused on not having or using additional classes for those elements, but yes, the rows, and timeline are class intensive, and those were, of course, the first things I added because I needed them for a client at that time. I put notes in the _settings.scss file for some plans I have for V3 last month which include removing the rows, and disabling the timeline by default or possibly removing it completely and making a new "nano" project for such features.

Off topic kind of, I'm working on a project now where I'm using PicoCSS and the client its for is Nano Farms, so thats funny you mentioned nano in your comment too haha. It must be a sign!

And onto what you did! I love that you brought the <menu> tag into your project!! I've been exploring ways to do that as well What are you using that for thats different than the current <nav>? I tried browsing your site for where you did use the menu tag but was unable to find it. I'd be interested in seeing how you did that, and the meter that you discussed!

Hey @wwmoraes I actually answered some of your concerns in this discussion about keeping Pico smaller.

Honestly, I do not think Pico needs a full row / column grid system at all, and I would like to try and incorporate the CSS grid-template to set the basic side panels in a template easily.

Most of the enhancements I've added to my fork I focused on not having or using additional classes for those elements, but yes, the rows, and timeline are class intensive, and those were, of course, the first things I added because I needed them for a client at that time. I put notes in the _settings.scss file for some plans I have for V3 last month which include removing the rows, and disabling the timeline by default or possibly removing it completely and making a new "nano" project for such features.

Off topic kind of, I'm working on a project now where I'm using PicoCSS and the client its for is Nano Farms, so thats funny you mentioned nano in your comment too haha. It must be a sign!

And onto what you did! I love that you brought the <menu> tag into your project!! I've been exploring ways to do that as well What are you using that for thats different than the current <nav>? I tried browsing your site for where you did use the menu tag but was unable to find it. I'd be interested in seeing how you did that, and the meter that you discussed!

@Yohn I am about to register nanocss.org > PicoCSS in its core but with extensions and recipes for larger projects ... But I doubt to have enough capacity at the moment ;-).

[arderyp]

What am I missing? I am pulling

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">

and using the exact style guide example:

<menu>
      <label data-role="burger"><input type="checkbox"></label>
      <ul role="menubar">
        <li><strong>Acme Corp</strong></li>
      </ul>
      <ul role="menuitem">
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
      </ul>
    </menu>

and its not collapsing?

[suchislife801]

Pico.css Responsive Nav Example

Here's an example in Pure JavaScript and very minimal CSS while staying close to the source.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pico.css Responsive Nav</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style type="text/css">

    /* Nav border bottom */
    nav {
      border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
    }

    /* Hamburger menu styles */
    .nav-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
    }

    .nav-toggle:focus {
      outline: none;
      box-shadow: none !important;
    }

    /* Mobile styles */
    @media (max-width: 768px) {
      .nav-toggle {
        display: block;
      }

      nav ul:last-child {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background: var(--pico-background-color);
        border-top: var(--pico-border-width) solid var(--pico-muted-border-color);
        margin: 0;
        padding: 0;
      }

      nav ul:last-child.show {
        display: flex;
      }

      nav ul:last-child li {
        width: 100%;
        text-align: left;
      }

      nav {
        position: relative;
        flex-wrap: wrap;
      }

      nav ul:first-child {
        flex: 1;
      }
    }
  </style>
</head>
<body>
  <nav class="container">
    <ul>
      <li><strong>Brand</strong></li>
    </ul>
    <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
      <!-- Material Design Icon : menu -->
      <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
        <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
      </svg>
    </button>
    <ul id="navMenu">
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <main class="container">
    <h1>Responsive Navigation</h1>
    <p>Resize your browser window to see the hamburger menu appear on mobile screens.</p>
  </main>

  <script type="text/javascript">
    const navToggle = document.getElementById('navToggle');
    const navMenu = document.getElementById('navMenu');

    navToggle.addEventListener('click', () => {
      navMenu.classList.toggle('show');
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
      if (!navToggle.contains(e.target) && !navMenu.contains(e.target)) {
        navMenu.classList.remove('show');
      }
    });

    // Close menu when clicking a link
    navMenu.querySelectorAll('a').forEach(link => {
      link.addEventListener('click', () => {
        navMenu.classList.remove('show');
      });
    });
  </script>
</body>
</html>

Screenshots:

[dday9]

You cannot make it responsive without code duplication without using some sort of JavaScript.

If you want a JavaScript-less approach, you can leverage the dialog component with a checkbox hack with minimal CSS. Just keep in mind that this would require you to duplicate the content of the menu:

<main>
  <nav>
    <ul>
      <li><strong>Acme Corp</strong></li>
      <li role="separator">
        <label for="checkbox-navigation">&#9776;</label>
      </li>
    </ul>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>
</main>

<input type="checkbox" id="checkbox-navigation" hidden>
<dialog>
  <article>
    <header>
      <nav>
        <ul>
          <li>Acme Corp</li>
        </ul>
        <ul>
          <li><label for="checkbox-navigation">&times;</label></li>
        </ul>
      </nav>
    </header>
    <aside>
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </article>
</dialog>

main > nav > ul > li[role=separator] {
  display: block;
}

main > nav > ul:not(:first-of-type) {
  display: none;
}

@media (min-width: 768px) {
  main > nav > ul > li[role=separator] {
    display: none;
  }
  main > nav > ul:not(:first-of-type) {
    display: block;
  }
}

#checkbox-navigation + dialog {
  display: none;
}

#checkbox-navigation:checked + dialog {
  display: block;
}

Demo: https://jsfiddle.net/2ya1k9st/

[dday9]

After giving this a bit more thought, you don't even need the checkbox hack since command and commandfor are supported:

<header>
  <nav role="menubar" aria-label="Website navigation bar">
    <ul aria-label="Brand name">
      <li role="none">
        <strong>Acme Corp</strong>
      </li>
      <li role="separator">
        <button command="show-modal" commandfor="dialog-navigation" aria-label="Open navigation">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true" focusable="false">
            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
          </svg>
        </button>
      </li>
    </ul>
    <ul aria-label="Navigation">
      <li role="none"><a role="menuitem" href="#">About</a></li>
      <li role="none"><a role="menuitem" href="#">Services</a></li>
      <li role="none"><a role="menuitem" href="#">Products</a></li>
    </ul>
  </nav>
</header>

<dialog id="dialog-navigation">
  <article>
    <header>
      <button aria-label="Close" rel="prev" command="request-close" commandfor="dialog-navigation"></button>
      <p>
        <strong>Acme Corp</strong>
      </p>
    </header>
    <aside>
      <nav>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
        </ul>
      </nav>
    </aside>
  </article>
</dialog>

nav[role="menubar" i] > ul > li[role=separator] {
  display: block;
}

nav[role="menubar" i] > ul:not(:has(li[role="separator" i])) {
  display: none;
}

@media (min-width: 768px) {
  nav[role="menubar" i] > ul > li[role=separator] {
    display: none;
  }
  nav[role="menubar" i] > ul:not(:has(li[role="separator" i])) {
    display: block;
  }
}

Demo: https://jsfiddle.net/e1swg205/

[dday9]

An alternative, no-JS approach, would be to leverage the details element. This can leverage the role="menubar" attribute, which isn't 100% W3 compliant because technically a details element cannot have this role, but PicoCSS already breaks this rule via the summary[role="button"] recommendation:

<details role="menubar" aria-labelledby="menubar-title">
  <summary>
    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor" aria-hidden="true" focusable="false">
      <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
    </svg>
  </summary>
  <nav aria-label="Website navigation bar">
    <ul aria-label="Brand name">
      <li role="none">
        <strong>Acme Corp</strong>
      </li>
    </ul>
    <ul aria-label="Navigation">
      <li role="none"><a role="menuitem" href="#">About</a></li>
      <li role="none"><a role="menuitem" href="#">Services</a></li>
      <li role="none"><a role="menuitem" href="#">Products</a></li>
    </ul>
  </nav>
</details>

details[role="menubar" i] > summary::after {
  display: none;
}

details[role="menubar" i] > summary > nav,
details[role="menubar" i] > nav > ul {
  overflow-x: auto;
}

details[role="menubar" i] > nav,
details[role="menubar" i] > nav > ul {
  flex-direction: column;
}

details[role="menubar" i] > nav > ul > li {
  flex: 0 0 auto;
}

@media (min-width: 576px) {
  details[role="menubar" i] > summary {
    display: none;
  }

  details[role="menubar" i] > nav,
  details[role="menubar" i] > nav > ul {
    flex-direction: row;
  }

  details[role="menubar" i]:not([open])::details-content {
    content-visibility: visible;
  }
}

Demo: https://jsfiddle.net/97x5fotz/