search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.04k stars 582 forks source link

Replace hamburger bars with text? #443

Closed davidrhoderick closed 3 years ago

davidrhoderick commented 3 years ago

I can see that there is a class .react-burger-menu-btn that contains the accessibility text "Open Menu". Is there a way I can show that text using the Javascript menu styles? It looks like its just using font-size: 0px to hide the text but I can't seem to find the property to send to the menu component to control that font size...

negomi commented 3 years ago

Hi @davidrhoderick,

Modifying that text isn't currently possible via the JS styles.

You could do it with CSS like this:

.bm-burger-button button {
  font-size: 16px !important; /* Needed to override inline style */
  text-indent: 48px;
  white-space: nowrap;
}

To make it possible with JS, it would take a small code change to add a new key to the styles object (bmBurgerButtonInner or something), and extend the styles here: https://github.com/negomi/react-burger-menu/blob/main/src/components/BurgerIcon.js#L95

stale[bot] commented 3 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.