Change background colour of nav menu dropdown

• 

  emilyrickardstylist · Member · Apr 26, 2018 at 10:00 am

  • Copy link
  • Add topic to favorites

  Hi

  Is there a bit of custom CSS that will allow me to change the background colour of the dropdown menus in the nav?

  Thanks!

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

• 

  shubhamgmath · Member · Apr 26, 2018 at 11:47 am

  • Copy link

  Hi emilyrickardstylist

  Is there a bit of custom CSS that will allow me to change the background colour of the dropdown menus in the nav?

  Yes you can use the below CSS code to change the background color of the dropdown menu

  .main-navigation ul .sub-menu li a, .main-navigation ul .children li a {
      background: blue !important;
  }

  Custom CSS can only be added if you are under premium or business plans. To know more about how to add custom CSS here is the support document for that:
  https://en.support.wordpress.com/custom-design/editing-css/

  To know more about plans features and pricing please refer to support link below:
  https://wordpress.com/pricing/

  Hope this helps.

• 

  emilyrickardstylist · Member · Apr 26, 2018 at 2:11 pm

  • Copy link

  Perfect – thanks very much

  Is it also possible to change the opacity of that background?

• 

  shubhamgmath · Member · Apr 27, 2018 at 12:03 am

  • Copy link

  Hi emilyrickardstylist

  Yes You can add the code given below to change the opacity of that background

  .main-navigation ul .sub-menu li a, .main-navigation ul .children li a {
      opacity: 1;
  
  }

  Additionally, The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.

  Hope this helps.

• 

  emilyrickardstylist · Member · Apr 27, 2018 at 9:39 am

  • Copy link

  Brilliant – thank you!

• 

  shubhamgmath · Member · Apr 28, 2018 at 12:22 am

  • Copy link

  You’re Welcome. Happy to help :)