Custom CSS code to modify the color of the WordPress horizontal restaurant

G’Day Folks

I want to change the vertical Menu colour of my wordpress site. Unfortunately, there is no theme option from the dashboard to change the colours.

Can someone pls share a custom css code to change the colors of the Vertical menu of a WordPress site ?

Summary of changes required:

1. Change the b/g from white to black for both ‘Main Category’ & ‘Sub Category’ menu.
2. Change icon color from black to white
3. Change text color from black to white

I have shared the site link below in order to inspect the Developer console.

Thanks in Advance.

Hi,

That’s a complicated section and you will also need to change the initial narrow left menu to the same colours otherwise it will be jarring when they change.

I’ve only addressed screen sizes larger than 768px as the menu changes to a hamburger at smaller than that size and you will need to implement the appearance as there is nothing there at the moment.

The code for the larger screen is as follows and is quite complex.

@media only screen and (min-width: 768px) {
  #vertical-menu-float,
  #vertical-menu-float.nasa-active,
  #vertical-menu-float:hover {
    background: #000;
    color: #fff;
  }
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li
    > .nasa-title-menu {
    color: #fff;
  }
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li:hover
    > .nav-dropdown,
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li:hover
    > .nav-dropdown
    ul {
    background: #000 !important;
    color: #fff;
    border-color: #000;
  }

  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li
    > .nav-dropdown
    ul.sub-menu
    li
    > .nasa-title-menu {
    color: #fff;
  }
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li:hover
    > a {
    color: #000;
  }
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li
    > .nav-dropdown,
  #vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li
    > .nav-dropdown
    * {
    background: #000 !important;
    color: #fff !important;
  }
}

With that code in place you will get the following appearance.

Note that I removed the white divider line from that screenshot as it was upsetting things and the code I posted is all black background.