Baskerville 2 theme – change menu colors

• 

  hanfjournal · Member · Mar 15, 2021 at 3:47 pm

  • Copy link
  • Add topic to favorites

  Hi there, I’ve searched the forums and I have only found someone mentioning that it is possible to change the menu color here https://wordpress.com/forums/topic/baskerville-2-theme-change-background-color/ but I can’t see how.

  In the customizer section “Colors” I can only change the background color.

  Do I need CSS code to change the menu colors?

  Using Baskerville 2 version 2.0.3

  The blog I need help with is: (visible only to logged in users)

• 

  therefoiam · Member · Mar 16, 2021 at 10:26 am

  • Copy link

  Yes, it seems you can only change the menu color with custom CSS.
  see here: https://snipboard.io/KJvaTg.jpg
  this is the CSS code you will need

  /* change menu color */

  .main-navigation li > a {
      color: orange;
  }

• 

  hanfjournal · Member · Mar 18, 2021 at 2:36 pm

  • Copy link

  Hi thanks, this works fine to change the font color.

  But I’m sorry I was not very precise in my question. We would like to change all menu colors: Menu Background, Submenu Background, Font Color. Maybe we will also need to adjust the highlighted text color.

• 

  hanfjournal · Member · Mar 18, 2021 at 2:40 pm

  • Copy link

  Hello thanks, yes this works fine to change the font color.

  But I’m sorry I was not very precise in my question. We would like to change all menu colors: Menu Background, Submenu Background, Font Color. Maybe we will also need to adjust the highlighted text color.

  It would be great if there were theme setting for the menu colors, but CSS code of course will help too.

• 

  staff-mckluskey · Staff · Mar 19, 2021 at 11:30 am

  • Copy link

  Hi there!

  You can add this piece of code. Just change the colors to your liking:

  /* Menu Background */
  .bg-dark {
      background-color: BLACK;
  }
  /* Submenu Background */
  .main-navigation ul ul li {
      background: RED;
  }
  /* Menu Font Color */
  .main-navigation li > a, .main-navigation ul ul a {
      color: BLUE;
  }
  /* Menu highlighted font color */
  main-navigation li:hover > a, .main-navigation ul ul a:hover {
    color: BLUE;
  }

  I hope that helps :)

• 

  hanfjournal · Member · Mar 26, 2021 at 12:39 pm

  • Copy link

  Thank you very much, this is working fine!