Responsive Navbar (burger icon)

[san-kumar]

I just discovered Spectre today and totally loving it.

Anyway, my question is the navbar component is not responsive. I searched the issues and as per the last discussion the owner @picturepan2 quoted that he is working on a css solution.

Anyway, so just how you guys are doing it? Or am I missing something?

I am coming from Bulma and that framework also has no JS but what they've done is implemented a "navbar-burger" and left the Javascript implement to the programmer (quote from the docs: "The Bulma package does not come with any JavaScript. Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript." If you're using Vue then this implementation is a simple v-show="active = !active")

I'm guessing something similar can be done for Spectre too? Will make life lot easy!

[tunjioye]

That is very true.

Since I started using Spectre, I don't use the BURGER MENU for Navbar. What I do is hide the navbar menu (LEFT & RIGHT) when the screen is small and show another alternative menu (JUST BELOW the APP LOGO) instead.

But just like you said it is very advisable to have a BURGER MENU in Spectre CSS itself.

I recommend @picturepan2 that we work on this (adding BURGER MENU) towards the next version update.

On Jul 19, 2018 9:39 PM, "San Kumar" [email protected] wrote:

I just discovered Spectre today and totally loving it.

Anyway, my question is the navbar component is not responsive. I searched the issues and as per the last discussion the owner @picturepan2 https://github.com/picturepan2 quoted that he is working on a css solution https://github.com/picturepan2/spectre/issues/302#issuecomment-334498189 .

Anyway, so just how you guys are doing it? Or am I missing something?

I am coming from Bulma and that framework also has no JS but what they've done is implemented a "navbar-burger" and left the Javascript implement to the programmer (quote from the docs https://bulma.io/documentation/components/navbar/#navbar-menu: "The Bulma package does not come with any JavaScript. Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu, in Vanilla Javascript." If you're using Vue then this implementation is a simple v-show="active = !active")

I'm guessing something similar can be done for Spectre too? Will make life lot easy!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/picturepan2/spectre/issues/471, or mute the thread https://github.com/notifications/unsubscribe-auth/AJhHArxiKu99_-UR0qHI4u_BK3mcyuK_ks5uIO5pgaJpZM4VXDmn .

[vatson]

@san-kumar

Have you looked at Off-canvas already?

[san-kumar]

@vatson I did but iirc that was for sidebar not the main header nav?

[marko-stimac]

+1, I am trying out Spectre and it feels kinda weird that collapsed navbar is not supported. Generally from a framework I only need that functionality for smaller screens + some grid for fast prototyping, other things aren't really important

[Abdur-rahmaanJ]

@picturepan2 Grrr ^^ this is hugely needed. Maybe a spectre JS soon???