CSS customization of navigation menu (McKinley theme)

• 

  multiversumtranslations · Member · Sep 20, 2014 at 1:30 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I just read plenty of forum entries and tried to find the correct CSS rules to do this, but I have to give up: I need your help.

  1) In the navigation menu, the name of the selected page appears white on smoke-white background, i.e. nearly invisible: how do I change the selected items colors?

  2) When hovering over the navigation menu items, the hover color is black: how do I change that?

  3) There are two thick, dark grey, horizontal bars above and below the names of the navigation bar items: can I modify them (color, size)?

  My blog is: multiversumtranslations.wordpress.com

  Thank you very much for your help!

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

• 

  lizthefair · Member · Sep 20, 2014 at 5:58 pm

  • Copy link

  Hi there,

  This should fix # 1

  .current_page_item a{
      color: #545678!important;
  }

  I believe you already fixed number 2, but if not, here’s the code:

  .nav-menu li a:hover{
      background: #567890;
  }

  Here’s how to change the color of the bars on either side of the menu:

  .navbar{
      background: #450986;
  
  }

  The size of the bars is a little more tricky as they aren’t actually separate bars, they are the places where the background color shows behind the menu. You could make them appear wider or more narrow by playing with the margins of the menu. This for example makes them very narrow:

  .nav-menu{
      margin: -10px;
  }

  The margin was originally set at 0, so anything below zero makes them more narrow, anything above zero makes them wider.

  I hope that helps!