ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   cjs
   Member

   Hopefully some experts here can help?
   This is a tricky one to describe so bare with me!

   I am fairly new to CSS mods and have been trying to modify my navigation menu. http://www.testwp.nosrednas.co.uk/
   I have managed to mostly get the desired effects (hover over is the same colour as the current page, and all other pages are a different colour)
   however when I click to navigate to another page if I click and then move the mouse away (to stop the hover over) it seems to go to anothre state (a white background) and I cannot stop it from doing this???

   I am sure its something obvious - but have tried countless mods to the child theme CSS, searched numerous forums for an answer, have tried interogating with firbug (but cannot find anything useful because it only happens once you've clicked and moved away from the link!)
   Also it doesnt do it in Chrome, but does do it in IE9 and FF

   Any help / advice appreciated

   Thanks in advance,

   Craig

   Posted 1 year ago #
2. 

   ScottNix
   Member

   In your default.css that Thematic uses, it is one of these guys.

   .sf-menu li {
        background: #FFFFFF;
   }
   
   .sf-menu li li {
        background: #FFFFFF;
   }
   
   .sf-menu li li li {
        background: #9AAEDB;
   }
   
   .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background: #FAFAFA;
        border-bottom-color: #CCCCCC;
        outline: 0pt none;
   }

   I can't be positive which one, could be a combo of a few. You could either set a background, or override it. The white is on the LI, it is a little bit of a pain to test viewing with Firebug because a page load will wipe the changes made. Easiest way would be to make all the whites #ffffff, and #fafafa something like pink to easily identify which one.

   Posted 1 year ago #
3. 

   cjs
   Member

   Thanks for such a quick response ScottNix -
   All sorted!

   Out of curiosity how did you know to look at those? (just to give me a chance of finding future problems?)
   Thanks again!

   Craig

   Posted 1 year ago #
4. 

   Jagst3r15
   Member

   Yes, he knew because sf stands for "superfish" - the menu script being used. So always look for stuff like .sf-menu and whatnot when you want to style your menu in Thematic.

   Posted 1 year ago #
5. 

   ScottNix
   Member

   Also I knew it was a default somewhere in the orignal styling. I did use Firebug to look at the imported stylesheet and could see the whites still in the default styling. You may have been checking the actual a (link) when you actually need to manually select the li in Firebug itself.

   I never know if I should tell people this or not, but it is also best practice to combine all the @import files in the CSS to one single file. You don't have to, and there are valid reasons not to, but it also helps sometimes when you can just change the CSS itself so you don't have to override existing CSS.

   Posted 1 year ago #
6. 

   cjs
   Member

   Amazing - think I can learn a lot from this forum! you guys rock!

   Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.