Changing font color of menu item and submenu item

Homepage › Community Forums › Epik Theme Support › Changing font color of menu item and submenu item

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 20, 2014 at 9:09 pm #14320
    Genghis7777
    Customer

      I implemented some anchors on my epik home page.

      However, when I set up menu items in the menu bar, to jump to them, they are presented in a different color (grey, in my case).

      When I do the same for submenu items, they come out blue which doesn’t contrast well with the black drop down menu background which is black.

      I’d like everything on the menus to be white unless the mouse hovers over them and then they can change color after that.

      Can anyone help me out here? Thanks in advance

      Dev website address is: http://cbs.thenewblack.dnserver.net.nz/

      October 21, 2014 at 10:59 am #14326
      Wes
      Moderator

        If you look on line 2202 in your css you’ll see the following code that is causing that to happen – 

        .site-header .genesis-nav-menu .current-menu-item > a,
.site-header .genesis-nav-menu a:hover {
	color: #aaa;
}

        You can split that code up and add the white font/color to the “current-menu-item” link while leaving the “hover” as gray like this – 

        .site-header .genesis-nav-menu .current-menu-item > a {
	color: #fff;
}
.site-header .genesis-nav-menu a:hover {
	color: #aaa;
}
        October 21, 2014 at 2:54 pm #14337
        Genghis7777
        Customer

          Hi Wes

          Thanks for getting back to me. Thanks, that worked for correcting the colors for the main menu items. Much appreciated.

          I tried to do something similar for the submenu items and changed the code to look like this:

          .site-header .genesis-nav-menu a {
          color: #fff;
          }

          .site-header .genesis-nav-menu .current-menu-item > a, {
          color: #fff;
          }

          .site-header .genesis-nav-menu a:hover {
          color: #aaa;
          }

          .site-header .genesis-nav-menu .sub-menu .current-menu-item a {
          color: #fff;
          }

          .site-header .genesis-nav-menu .sub-menu .current-menu-item > a {
          color: #fff;
          }

          .site-header .genesis-nav-menu .sub-menu .current-menu-item a:hover {
          color: #aaa;
          }

          but that didn’t work. The submenu items linked to anchors seem permanently gray. The submenu items linked to other pages behave correctly. Any thoughts? Thanks in advance.

          October 21, 2014 at 8:00 pm #14349
          Wes
          Moderator

            Line 3087 in your css should show something like this – 

            .epik-darkblue .nav-primary .sub-menu a:hover,
.epik-darkblue .nav-secondary .sub-menu a:hover,
.epik-darkblue .site-header .sub-menu a:hover,
.epik-darkblue .site-header .genesis-nav-menu .sub-menu .current-menu-item > a,
.epik-darkblue .genesis-nav-menu .sub-menu .current-menu-item > a,
.epik-darkblue .genesis-nav-menu .sub-menu .current-menu-item > a:hover { 
	color: #bbb;
}

            Since you’re using the darkblue theme it overrides the color. So you can take out the line –
            .epik-darkblue .site-header .genesis-nav-menu .sub-menu .current-menu-item > a and add it on its own with the color you want and it should work.

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