Changing background color of Hamburger menu in react

Question

I am using the react-burger-menu and can't change the menu item background color from the default red/pink. This is the react code I am using:

import React, { Component } from 'react';
import { slide as Menu } from 'react-burger-menu'
import './burger.css';
import icon from './menu.png';
import { Link } from 'react-router-dom';

class BurgerMenu extends Component {

    showSettings (event) {
        event.preventDefault();
      }

      render () {
        return (
          <Menu customBurgerIcon={ <img src={icon} /> }>
            <Link className="menu-item">Contact</Link>
            <Link className="menu-item">About</Link>
            <Link className="menu-item">Trending</Link>
            <Link className="menu-item">Settings</Link>
          </Menu>
        );
      }

}

export default BurgerMenu;

And here is the css I am using

.bm-burger-button {
    position: fixed;
    width: 30px;
    height: 30px;
    top: 78px;
    left: 10px;
    background-color: white;
  }

 .menu-item {
     padding: 5px;
     color: white;
 }

 .menu-item:hover {
     background-color: #808090;
 }

I also see a blue outline box around the first item, and whichever item I click. Is there any way to get rid of that?

Here is the picture:

Thanks!

Answer 1

if you want to remove the background color for the menu item when hovering you can make it transparent like this :

.menu-item:hover {
     background-color: transparent;
 }

And for removing the blue border on links you can use outline: none; in your menu-item class like this :

 .menu-item {
     padding: 5px;
     color: white;
     outline: none;
 }

For the sidebar background color you can change it like this :

.bm-menu {
  background-color: green;
}

Sample stackblitz