Edin theme css – Change navigation bar color

• 

  ybaileche · Member · Aug 3, 2016 at 9:37 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I am trying to get rid of the blue background that appears on the active page. Ideally I would like to have the navigation bar with the background in white, the text in black and the text changing in blue when hovering?

  Thanks

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

• 

  hallluke · Member · Aug 3, 2016 at 10:01 pm

  • Copy link

  What theme are you using?

  Your blog is private so we can’t take a look and CSS is theme dependent. I can always take a look at the demo page for your theme and offer some examples based on that for changing the text and background colours for the main navigation menu.

• 

  ybaileche · Member · Aug 4, 2016 at 8:09 am

  • Copy link

  Thanks for your reply. I’m using the edin theme. Sorry I can’t make it public for the moment

• 

  hallluke · Member · Aug 4, 2016 at 8:31 am

  • Copy link

  I assume you have the classic menu enabled rather than the pop-out version. Here’s some code to change the menu colours for desktop screens, the tablet and mobile pop-out version is left as it is:

  @media screen and (min-width: 1020px) {
    .navigation-classic .primary-navigation .menu-primary a,
    .navigation-classic .primary-navigation .menu-primary > ul > li.current-menu-item > a,
    .navigation-classic .primary-navigation .menu-primary > ul > li.current_page_item > a {
      background: #fff;
      color: #303030;
    }
    .navigation-classic .primary-navigation .menu-primary a:hover,
    .navigation-classic .primary-navigation .menu-primary > ul > li:hover,
    .navigation-classic .primary-navigation .menu-primary > ul > li > a:hover,
    .navigation-classic .primary-navigation .menu-primary > ul > li > a:focus,
    .navigation-classic .primary-navigation .menu-primary > ul > li > a:active {
      background: #fff;
      color: #1279BE;
    }
    .navigation-classic .primary-navigation .menu-item-has-children:hover::before {
      color: #1279BE;
    }
    .navigation-classic .primary-navigation ul ul li {
      background: #fff;
    }
    .navigation-classic .primary-navigation ul ul li:last-of-type {
      border-bottom: 12px solid #fff;
    }
  }

• 

  ybaileche · Member · Aug 4, 2016 at 9:25 am

  • Copy link

  Thanks a lot. Yes I’m using the classic menu. This is working if I use the standard blue used by the theme.

  But I would like to use this blue #2d597a and in this case it’s not working anymore even if I change the color in the code?

• 

  hallluke · Member · Aug 4, 2016 at 9:42 am

  • Copy link

  Can you post the CSS you added in between code tags so I can take a look:

  <code>PASTE IN YOUR CSS HERE</code>