Change Menu Hover Color in Edin

• 

  keystonepropertyservices · Member · Feb 14, 2017 at 3:37 pm

  • Copy link
  • Add topic to favorites

  Hello, I’m trying to change the hover color in the menu to match my background. It should be orange (#d47d17), however it’s red.

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

• 

  thesacredpath · Member · Feb 14, 2017 at 8:20 pm

  • Copy link

  Hi there, add the following to your custom CSS to change the hover background color on the menu items to your orange.

  .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:hover, .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li > a:focus {
  	background-color: #d47d17;
  }

• 

  keystonepropertyservices · Member · Feb 15, 2017 at 5:04 pm

  • Copy link

  Thank you for responding! I’ve added the CSS but it’s not changing the menu color. Any advice?

• 

  thesacredpath · Member · Feb 15, 2017 at 9:42 pm

  • Copy link

  Hi, my browser is not showing a “current menu item” color, which I think is what you are wanting in addition to the code that I have already given. Add this along with the other code. I checked this directly in your customizer and it is working for me.

  .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a, .large-screen.navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > a {
  	background-color: #d47d17;
  }

• 

  keystonepropertyservices · Member · Feb 16, 2017 at 2:38 pm

  • Copy link

  It worked! Thank you so much!

• 

  keystonepropertyservices · Member · Feb 16, 2017 at 2:53 pm

  • Copy link

  I’m so sorry. How should the code change for viewing on mobile devices?

• 

  thesacredpath · Member · Feb 17, 2017 at 3:43 am

  • Copy link

  Currently, the text on the mobile touch device menu is white on a red background. This will turn the red into the same orange as your main background and adds a 1px white left and right border. I’ve used a Media Query to limit this change to when the touch device menu is active at 1019px and narrower. See what you think with this.

  @media screen and (max-width: 1019px) {
  	.navigation-wrapper {
  		background-color: #d47417 !important;
  		border-left: 1px solid #fff;
  		border-right: 1px solid #fff
  	}
  }