By kevinorin on

Site: http://bit.ly/rmYEQf

Brief: I can't seem to get the active pages/links to keep its active color + white background. The way the links currently respond on mouse-over is the way they should look when active.

And if a sub-nav page is active, both the active sub and its parent should be active.

The styles are pulling from at least 3 places instead of just my theme css (superfish css, system.css, etc).

thoughts?

Comments

couturier’s picture

couturier commented

Have you tried using Firebug with the Firefox browser to identify the various locations that might be controlling your background color and then experimenting with those locations to change the background color of active links in your menu?

The background active color might be controlled by a special class or ID. Here is an example from the Bartik theme in Drupal 7 core. These following sections allow control over the background color of menu links with some rbga transparency added.

#main-menu-links a:hover,
#main-menu-links a:focus {
background: #f6f6f2;
background: rgba(255, 255, 255, 0.95);
}
#main-menu-links a:active {
background: #b3b3b3;
background: rgba(255, 255, 255, 1);
}
#main-menu-links li a.active {
border-bottom: none;
}
.featured #main-menu-links li a:active,
.featured #main-menu-links li a.active {
background: #f0f0f0;
background: rgba(240, 240, 240, 1.0);
}

Also, in Performance in the Drupal administration menu, you can choose to aggregate your CSS and JavaScript files which may speed up your site.

kevinorin’s picture

kevinorin commented

Yes I am fire-bugging, its referencing at least 3 different style-sheets. I think i disabled the system.css sheet and tweaked some other things. My problem now is that If I click a subcategory link the parent link does not remain active, not sure if there is a workaround.

couturier’s picture

couturier commented

Yes, you succeeded on getting the first issue fixed. Wish I could offer you more help, but all I would know to do is just experiment. Keep working with all your style sheets, and I'm sure you'll eventually locate the section that controls what you need. Sometimes you may need to flush the cache in Drupal Performance Admin for CSS changes to take effect. Also, be sure that whatever browser you use for testing is refreshing from the server each time or that you flush all data from its cache for each page refresh. Otherwise, tweaks to CSS may randomly not show up when you implement them. I've found that Firebug is tricky for working with menu changes. Not always will Firebug allow easy access to the menu elements you need to change, so I often have better success with saving changes to the real style sheet. Sometimes you might have found a solution but not have seen it show up due to old data remaining in the caches. You might think about repeating some of your CSS changes with more frequent cache flushes during testing if you have run out of other ideas.

Beautiful site, by the way. Very nice work.