Changing Main Menu buttons background colors

• 

  mrsbulfin · Member · May 2, 2020 at 11:38 pm

  • Copy link
  • Add topic to favorites

  I am not seeing an option on the customize menu for the Redhill theme and I want to change the color on the main menu tabs (Home, About, Contact, Resources) to something other than red. Can someone help with this? Thanks in advance!

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

• 

  strangeisolation · Member · May 3, 2020 at 12:01 am

  • Copy link

  Hello,
  I am also using the Redhill theme and had the same question minutes ago and found an answer posted in the forum from a few months ago:
  https://wordpress.com/forums/topic/how-to-change-red-color/

  When I copied and pasted the custom CSS from this answer, I saw there were extra spaces added unexpectedly. I removed these extra spaces and the custom CSS worked for me and I was able to change the color from red to the color that I wanted.

• 

  mrsbulfin · Member · May 3, 2020 at 12:10 am

  • Copy link

  Thanks so much! Did you add this in the “Additional CSS” space on the main customizer page? I copy and pasted the css into that area and nothing changed. I’m new to wordpress and not a coder in the least so I’m sorry if this is a simple fix.

• 

  shubhamgmath · Member · May 3, 2020 at 12:34 am

  • Copy link

  @mrsbulfin

  .main-navigation>div>ul>li:hover>a, .main-navigation>div>ul>li.focus>a, .main-navigation>div>ul>li.current-menu-item>a {
      background: blue; //change colour here as per your requirement
  }

  Please add the above code in Additional section. It will help you to change the colour from red to blue(or whatever you need)

• 

  mrsbulfin · Member · May 3, 2020 at 12:45 am

  • Copy link

  Thank you, that worked! What code would I use to change the title color? I like the black but would like to change the color when you hover over it with a mouse (it currently goes from black to red).

• 

  shubhamgmath · Member · May 3, 2020 at 12:53 am

  • Copy link

  @mrsbulfin

  If you just want to change the colour when you hover the mouse on the title. You just need to add the code given below:

  p.site-title :hover {
      color: yellow; // change the colour value as per requirement
  }

  If you wish to change the colour of title other than red then you can add the code given below

  
  p.site-title {
      color: green;// change the colour value as per requirement
  }

  Hope this helps

• 

  mrsbulfin · Member · May 3, 2020 at 1:19 am

  • Copy link

  It does! Worked perfectly. Thanks so much!

• 

  shubhamgmath · Member · May 3, 2020 at 1:21 am

  • Copy link

  @mrsbulfin

  You’re Welcome. Happy to help :)