search

cyntler / hamburger-react

Animated hamburger menu icons for React.js weighs only 1.5 KB.
https://hamburger-react.netlify.app
MIT License
963 stars 36 forks source link

Styling #45

Closed Senninseyi closed 3 years ago

Senninseyi commented 3 years ago

I am not sure if its for all but most of the components doesn't have properties for styling <Sling onToggle={props.clicked} color="white" size={18} hideOutline={true}/> is there a way to fix this cos i have read the documentations

luukdv commented 3 years ago

Hi! There are various props for styling which you can all find on https://hamburger-react.netlify.app, can you clarify what you mean?

Senninseyi commented 3 years ago

Okay lemme show an image image

Lets say on mobile version i have this image

I want to kind of override the current css that's present in the hamburger

luukdv commented 3 years ago

Ah okay, currently that's only possible through CSS by targeting .hamburger-react. Can you indicate which styles you want to overwrite? That way I know which props still might be missing from a user's perspective.

By the way, I'm considering adding style and className props for version 3.0.

Senninseyi commented 3 years ago

Okay thanks a bunch... nice once tho,

luukdv commented 3 years ago

By the way, if you could let me know which styles needed overwriting, that would help me determine which props still might be missing. Thanks in advance!

rodrigo-arias commented 2 years ago

Hi @luukdv, thank you for your work on this package. I got to this issue looking for some way to add responsive styles. The basic (but not the only thing) is to be able to add a size that is different between resolutions. I think it would be great if you could add classNames so that we have more control over the hamburger. Thanks

luukdv commented 2 years ago

Thanks for the clarification @rodrigo-arias 🙂 I'll make sure to add a className prop to version 3.0.

SpyrosMourelatos commented 2 years ago

I would suggest z-index, look what I achieved by adding a z-index on .hamburger-react selector

https://user-images.githubusercontent.com/26333139/158398908-676e52b8-33e9-464a-8ad4-96e410f6eccb.mp4

riccardolardi commented 6 months ago

@luukdv what happened to the className prop? :) or is this project abandoned?

luukdv commented 6 months ago

@riccardolardi As of https://github.com/cyntler/hamburger-react/issues/64, the project is revived. 🙂 Not sure how the v3 branch is coming along, that's up to cyntler now.