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]

@wwmoraes Nice, I like how you were able to set that up! I found pico a little over a month ago or so, and started adding a bunch of fixes, pull requests from here and new components to my fork that also had a hamburger menu but yours is definitely better. It would be an awesome improvement, if you'd like to create a pull request?

[wwmoraes]

@Yohn Glad to see my hacks aren't that hack-ish after all 😄

It'd be my pleasure to contribute. A bit more on that off-topic: I've also extended pico.css with some niceties while playing around, such as support for <meter>. I'll come back to this once I finish my original plan to give my site a new theme made from scratch using pico.

[Yohn]

@wwmoraes can't wait to see what else you've added! Be sure to check out my fork cause some things might already be fixed, it added there! It looks like I'll be working on another site now as well, where I will be using PicoCSS, so I'm sure I'll be adding some more tweaks within the coming weeks too!