To change the colour of the menu and footer

• 

  agirlinchennai · Member · Mar 25, 2017 at 3:45 pm

  • Copy link
  • Add topic to favorites

  The colour of the

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

• 

  otpidusprime · Member · Mar 26, 2017 at 11:04 am

  • Copy link

  Hi,
  Use the following codes to change the colors:

  CODE FOR MENU

  /*
  This will change the menu background color.
  Edit the given background hex color code(#000000) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.main-navigation) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .main-navigation {
      background: #000000 !important;
  }
  
  /*
  This will change the menu text color.
  Edit the given text hex color code(#e6e6e6) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.main-navigation a) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .main-navigation a {
      color: #e6e6e6 !important;
  }
  
  /*
  This will change the active menu text color.
  Edit the given text hex color code(#50b5ff) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.current-menu-item>a) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .current-menu-item>a {
      color: #50b5ff !important;
  }

  CODE FOR FOOTER

  /*
  This will change the footer background color.
  Edit the given background hex color code(#d0d0d0) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.footer-wrap) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .footer-wrap {
      background-color: #d0d0d0 !important;
  }
  
  /*
  This will change the footer text color.
  Edit the given text hex color code(#616161) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.main-navigation a) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .site-footer {
      color: #616161 !important;
  }
  
  /*
  This will change the footer widget title text color.
  Edit the given text hex color code(#4c4c4c) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.main-navigation a) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .site-footer .widget-title {
      color: #4c4c4c !important;
  }
  
  /*
  This will change the footer link text color.
  Edit the given text hex color code(#2f2bd6) to the color of your liking.
  You can remove "!important" code if you are directly editing the existing CSS class(.main-navigation a) and if you are adding this code at the end of the CSS file then do not remove "!important".
  */
  .site-info a, .site-info a:hover {
      color: #2f2bd6 !important;
  }

  Hope this will help :)