Change Menu Hover Color

Homepage Community Forums Aspire Theme Support Change Menu Hover Color

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #17666
    jondonley
    Customer

      I used the customizer to change the color, which did indeed change the widget background on the home page and the button color, but it did not change the color for the menu hover and sub-menu hover. Should this be changing with the customizer or is custom CSS needed?

      http://www.newdentalwebsite.com/

      Thanks!

      #17668
      heathelin
      Customer

        Same issue here. I still have orange in the menu. However, I’d prefer different colors for the widget and menu. I tried line 183 but no dice.

        #17670
        heathelin
        Customer

          Jondonley (or anyone), did you solve your color issue? If so, would you mind sharing? I’m not having any luck. I would like my menu hover to be #e668e5. Thank you!

          https://hoosiertireeast.com/

          #17673
          Andykev
          Customer

            You change the colors under “SITE NAVIGATION”.

            .genesis-nav-menu a:focus,
            .genesis-nav-menu a:hover {
            	color: #e668e5;
            }
            
            .site-header.light .genesis-nav-menu a {
            	/*padding: 30px 15px;*/
            }
            
            .site-header.light .genesis-nav-menu > .last > a {
                padding-right: 0;
            }
            
            .genesis-nav-menu li.highlight a:hover::before {
            	color: #fff;
            }
            
            .genesis-nav-menu li.highlight > a {
            	font-weight: 800;
            }
            
            .genesis-nav-menu > .menu-item > a {
            	text-transform: uppercase;
            }
            
            .front-page .site-header.light .genesis-nav-menu > .menu-item > a {
            	/*color: #e668e5;*/
            }
            
            .genesis-nav-menu .sub-menu {
            	left: -9999px;
            	letter-spacing: 0;
            	opacity: 0;
            	position: absolute;
            	-webkit-transition: opacity .4s ease-in-out;
            	-moz-transition:    opacity .4s ease-in-out;
            	-ms-transition:     opacity .4s ease-in-out;
            	-o-transition:      opacity .4s ease-in-out;
            	transition:         opacity .4s ease-in-out;
            	width: 200px;
            	z-index: 99;
            }
            
            .genesis-nav-menu .sub-menu a {
            	background-color: #222;
            	font-size: 12px;
            	padding: 20px;
            	position: relative;
            	width: 200px;
            }
            
            .genesis-nav-menu .sub-menu a:hover,
            .genesis-nav-menu .sub-menu li.current-menu-item > a {
            	background-color: #f5f5f5;
            	color: #e668e5;
            }
            

            The drop down menu is still orange so in the above example I changed it to “#f5f5f5”. You need to select a color combination which goes with your purple text, so it reads well (contrast). Maybe black?

            Other thing, you have “right click” disabled. I couldn’t use the “Inspect Element” to view the code to your site, so the above is from the Aspire Demo. Your actual code may be different. However, the Site Navigation section is what you need to play with to tweak your colors.

            #17675
            heathelin
            Customer

              Perfect! Thank you!

            Viewing 5 posts - 1 through 5 (of 5 total)
            • You must be logged in to reply to this topic.