Change Menu Color

• 

  williamdane · Member · Jul 10, 2016 at 11:17 pm

  • Copy link
  • Add topic to favorites

  Hey friends,
  So I’m setting up a website for our non profit, Ama Yoga, based out of Venice, CA and have a few questions about customizing the site. Is it possible to have the navigation bar at the top the same color as the one at the bottom, with the background of the item changing to match the orange in the word “yoga” when the cursor hovers over? Can we align the menu items on the right side of the screen? I would also like the social media buttons on the footer menu to match that same “yoga” orange.

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

• 

  williamdane · Member · Jul 11, 2016 at 12:04 am

  • Copy link

  Edit: I would like the menu colors on top and bottom of the page to be white, with matching orange color in the text (black on the “buttons” between menu items) and social media buttons. When rolling over with the cursor, I would like an orange square behind the top navigation menu items with white text.

• 

  thesacredpath · Member · Jul 11, 2016 at 5:56 am

  • Copy link

  Hi there, let’s give the following a try and see if this does what you are wanting.

  .main-navigation li:hover, .social-links ul a:hover::before {
      background-color: #f07134;
      color: #fff !important;
  }
  .main-navigation ul {
      text-align: right;
  }
  .main-navigation .nav-menu > li > a:hover::after, .main-navigation .menu > li > a:hover::after {
      color: #000 !important;
  }
  .main-navigation a:hover, .social-links ul a:hover::before {
      color: #fff !important;
  }