Changing Hover and Active Colors

  • Hi.

    I have a basic question. I’m working on my site’s appearance and I’ve been able to get most things looking right, but I’ve been unable to change the main menu hover and active to the desired red (#ff2400) color. Apologies it’s messy, but I quote what I have so far in Additional CSS. What am i missing? 

    footer[role="contentinfo"] {
    	text-align: left;
    	font-size: 100%;
    }

    footer[role="contentinfo"] a {
    	color: #000;
    }

    body.custom-font-enabled {
     font-family: Courier,sans-serif;
    }



    a {
    	outline: none;
    	color: #525252;
    }

    .site-header h1 {
    	font-weight: normal;
    	font-size: 23px;
    	line-height: 1.285714286;
    	margin-bottom: 14px;
    	margin-bottom: 1rem;
    }

    .main-navigation li {
    	margin-top: -5rem;
    		margin-bottom: -10rem;
    	font-size: 19px;
    	line-height: 1.42857143;



    	
    }


    	.main-navigation ul.nav-menu,
    	.main-navigation div.nav-menu > ul {
    		border-bottom: 0px solid #333;
    		border-top: 0px solid #333;
    		display: inline-block !important;
    		text-align: left;
    		width: 100%;
    	}

    .site-header h2 {
    	font-weight: normal;
    	/*	color: #FF2400;*/
    	
    	
    }

    .site-header h1 a:hover,
    .site-header h2 a:hover 
    {
    	color: #ff2400;
    }

    a:hover {
    	color: #ff2400;
    }

    /*
    .main-navigation a:hover,
    .main-navigation a:focus {
    	color: #ff2400;
    }
    */

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • @media screen and (min-width: 600px) {
      .main-navigation li a:hover, .main-navigation li a:focus {
        color: #ff2400;
      }
    }
    Thread Starter snow67

    (@snow67)

    Thanks so much. Almost there. The hover is now red, but active is still just in bold dark grey. Any ideas?

    If you mean the state that a link can assume, add it like this:

    @media screen and (min-width: 600px) {
      .main-navigation li a:hover, .main-navigation li a:active, .main-navigation li a:focus {
        color: #ff2400;
      }
    }

    However, if you mean the marking of the currently called page, then like this:

    @media screen and (min-width: 600px) {
      .main-navigation li a:hover, .main-navigation li.current-menu-item a, .main-navigation li a:focus {
        color: #ff2400;
      }
    }
    Thread Starter snow67

    (@snow67)

    Thank you so much! Got it!

    Nice if I could help you. You are welcome to set the topic to solved.

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