negomi/react-burger-menu

Replace hamburger bars with text?

davidrhoderick opened this issue · 2 comments

davidrhoderick commented

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

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 commented

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.