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.05k stars 586 forks source link

How to remove outline on item list wrapper #411

Closed mikebeaudry93 closed 4 years ago

mikebeaudry93 commented 4 years ago

Im getting an outline on the item list wrapper whenever I open the menu. Sorry if this is a trivial question but how do I remove this? Also, if I click anywhere outside the wrapper the outline disappears.

negomi commented 4 years ago

Hi @mikebeaudry93,

That's strange, do you mean the .bm-item-list element? Which browser are you seeing this in?

You might be able to hide it with CSS using outline: none; but I'm wondering why that element is getting an outline at all.

mikebeaudry93 commented 4 years ago

Hi Imogen,

Thanks for the reply! Yes, it’s the element you mentioned and I’m seeing it in chrome.

I tried hiding it like you said with outline: none but it didn’t work. I’ve attached a photo on how it looks.

On Mon, Oct 19, 2020 at 10:00 PM Imogen notifications@github.com wrote:

Hi @mikebeaudry93 https://github.com/mikebeaudry93,

That's strange, do you mean the .bm-item-list element? Which browser are you seeing this in?

You might be able to hide it with CSS using outline: none; but I'm wondering why that element is getting an outline at all.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/negomi/react-burger-menu/issues/411#issuecomment-712540020, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEHRMZ2KB6F5URHY6ZPUA3SLTVNVANCNFSM4SWWLKOA .

negomi commented 4 years ago

I don't see anything attached, happy to take a look though (if you can include your devtools open with the element selected in the screenshot, that would be helpful).

mikebeaudry93 commented 4 years ago
Screen Shot 2020-10-21 at 2 52 00 PM
negomi commented 4 years ago

Ah I see what's happening 😄

The menu expects you to pass your links/menu items as direct children, but because you're wrapping yours in that burger-menu-links div, the menu thinks you are only passing one item (and it focuses the first item by default).

So you have two options:

  1. Remove that div and pass your links as children directly (then just the first item will be focused)
  2. If you want to keep that wrapper div, you can pass the disableAutoFocus prop (this will disable the focus behavior, but that's not recommended because it will make your menu less accessible)
mikebeaudry93 commented 4 years ago

Thank you so much!

On Wed, Oct 21, 2020 at 11:46 PM Imogen notifications@github.com wrote:

Ah I see what's happening 😄

The menu expects you to pass your links/menu items as direct children, but because you're wrapping yours in that burger-menu-links div, the menu thinks you are only passing one item (and it focuses the first item by default).

So you have two options:

  1. Remove that div and pass your links as children directly (then just the first item will be focused)
  2. If you want to keep that wrapper div, you can pass the disableAutoFocus prop (this will disable the focus behavior, but that's not recommended because it will make your menu less accessible)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/negomi/react-burger-menu/issues/411#issuecomment-714202598, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMEHRM4MMJLQJ56VKAAE4R3SL6TK3ANCNFSM4SWWLKOA .