Custom CSS Code - Repost

[cdhimit]

Hi Paul

Can you pls review the custom css code which you shared in another topic to change the colours of the wordpress vertical menu ?

I want to apply the css code to different subdomain although it’s the same vertical menu & same theme. It needs some minor tweaking.

@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;
  }
}

Topic date July '25 - CSS Code to change Wordpress Vertical Menu Colors

Screenshot:

Site link

Thanks in Advance

[PaulOB]

If I add the code I gave before then it seems to look the same to me?

@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;
  }
  #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;
  }
}

What is it exactly that needs tweaking?

[cdhimit]

Hi Paul,

Indeed the code works fine.

It wasn’t working on the weekend.

Apologies for the false alarm.

Rgds