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 burger or cross click? #309

Closed ashpreetbedi closed 5 years ago

ashpreetbedi commented 5 years ago

Is there a CSS property for removing this outline on focus? When I click on the burger menu or the cross, this outline appears.

image image

I'm using a customBurgerIcon and customCrossIcon. Here are my current styles:

const sideBarStyleLargeScreen: Styles = {
  bmBurgerButton: {
    position: "fixed",
    width: "1.8em",
    height: "1.5em",
    left: "1.2em",
    top: "1em",
  },
  bmBurgerBars: {
    background: "#00091E",
  },
  bmCrossButton: {
    width: "1.5em",
    height: "1.5em",
    top: "0",
  },
  bmCross: {
    color: "#0BBA7F",
    width: "3em",
    height: "3em",
    top: "0",
    paddingRight: "1.5em",
  },
  bmMenuWrap,
  bmMenu,
  bmMorphShape,
  bmItemList: {
    background: "#00091E",
    paddingTop: "5em",
    paddingLeft: "1.5em",
  },
  bmOverlay,
};

Thank you again for building react-burger-menu :) :) :)

JSteeleAZ commented 5 years ago

I wonder if you're being "attacked" by Chrome! After a bunch of debugging, it turned out that Chrome wants to add an "outline" property to :focus elements: image

We're using Material-UI, so I set the "root" property of "outline: 'none !important'" for the MuiList element and it removed the outlining!

negomi commented 5 years ago

Hey @ashpreetbedi, @JSteeleAZ is correct - you'll need to set the outline property to none if you want to disable this. It's there for accessibility reasons though, so if you remove it, your site won't be keyboard navigable.