search

picturepan2 / spectre

Spectre.css - A Lightweight, Responsive and Modern CSS Framework
https://picturepan2.github.io/spectre/
MIT License
11.33k stars 811 forks source link

Responsive Navbar (burger icon) #471

Open san-kumar opened 6 years ago

san-kumar commented 6 years ago

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 commented 6 years ago

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" notifications@github.com 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 commented 6 years ago

@san-kumar

Have you looked at Off-canvas already?

san-kumar commented 6 years ago

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

marko-stimac commented 6 years ago

+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 commented 3 years ago

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