Custom CSS Code to change Wordpress Vertical Menu Color?

HTML & CSS
1

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 ?

Screenshot_12
Screenshot_121499×871 127 KB

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.

Site URL

Thanks in Advance.

1 Like
2

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.

image
image1193×850 141 KB

image
image1235×861 204 KB

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.

1 Like
3

Thanks Paul.

It seems nothing is too complicated for you given your extraordinary css skills. :blush:

The menu is rendering quite nicely with the dark b/g.

Screenshot_355
Screenshot_355611×846 69.2 KB

That said, there is a minor change.

Can you formulate another css code to change the text colour of the ‘Sub category’ menu item ‘on mouse hover’ to red (#eb1f28) ?

Rgds

5

Add this inside the media query code I just gave you and add it at the end.

#vertical-menu-float
    .vertical-menu-float-container
    .vertical-menu-float-wrapper
    > li
    > .nav-dropdown
    ul.sub-menu
    li
> .nasa-title-menu:hover{
    color:#eb1f28!important;
}
6

Issue solved.

Screenshot_357
Screenshot_357577×683 41.9 KB

I can confirm the Vertical Menu with dark b/g is rendering correctly on the 14" laptop & desktop monitor.

Thanks ! :slightly_smiling_face:

1 Like
7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.