Skip to content
This repository was archived by the owner on Oct 2, 2023. It is now read-only.

Provide a way to override media queries for changing when burger menu shows #40

Open
ro2nie opened this issue Nov 7, 2018 · 1 comment

Comments

@ro2nie
Copy link

ro2nie commented Nov 7, 2018

I've tried overriding the media queries which have a hard coded value of 768px but this looks hacky and difficult to do.
It would be nice if we could pass in a width for when the burger menu appears and the menu collapses.

UPDATE:
If anyone wants to override the media tags to have the navbar switching from the buger menu to the extended navbar, then this is what I came up with. Just change the 1160px value to the desired width:

@media screen and (min-width: 768px) and (max-width: 1160px) { label#luxbar-hamburger { display: block; padding: 18px 24px 18px 24px; position: relative; cursor: pointer; } ul.luxbar-navigation { display: flex; flex-direction: column; list-style: none; padding-left: 0; margin: 0; } .luxbar-checkbox:not(:checked) ~ .luxbar-menu { overflow: hidden; height: 58px; } .luxbar-menu-right .luxbar-header { margin-right: initial; } }

@balzss
Copy link
Owner

balzss commented Dec 10, 2018

Sorry for the late response. I agree that the query value shouldn't be hardcoded. It's been a long time since I created this library and I really need to update it. I'm thinking about a whole rewrite but until that I think your solution might be very useful for other people so thanks for taking your time and sharing it.

I will leave this issue open and will close it after the rewrite when the media queries are easier to modify.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants