How to css bartik main menu active link

By webdev100 on 19 Jul 2015 at 20:24 UTC

Hi,

I am using bartik theme. I am trying to apply css to main menu links. Hover/focus is working but not active. I am not getting yellow background after I click a link in main menu. Can you please help?

style.css file.

#main-menu-links a:hover,
#main-menu-links a:focus {
 background: black;
}
#main-menu-links a:active {
   background: yellow;
}
#main-menu-links li a.active {
  background: yellow;
}
.featured #main-menu-links li a:active,
.featured #main-menu-links li a.active {
    background: yellow;

}

Thanks.

Comments

Please read this article here

Stefan Lehmann commented 19 July 2015 at 22:01

Please read this article here. After that you should be able to debug the problem very easily on your own.

You simply have to find out, which style overrides the style for the active state.

I like cookies!

Don't hack core

teachyourselfdrupal commented 20 July 2015 at 15:58

It sounds like you are modifying the css files directly in the Bartik theme. This is a really bad idea that will result in all your changes being blown away when you update Drupal. You should create a sub-theme of Bartik (in other words use Bartik as a base theme) and then do your CSS customizations in your sub-theme.