• Hi everyone, just two quick questions as I’m still not fully fluent in CSS to know which sections I need to be tweaking 🙂

    I’ve been recoloring the menu so that the current (selected) category is highlighted along with any subcategories. Problem is, as soon as I mouse over a subcategory within the menu, the parent category is no longer highlighted. I’d like to keep that entire category/subcat structure highlighted.

    The other question I have is regarding spacing between menu items. There are so many padding/margin options in the header code that I’m not quite sure which one I need to be fiddling with. I just want to space the menu items out a bit more across the page.

    If I’ve confused anyone, I apologize – I can always provide a screenshot if needed. Thanks in advance!

    header code:

    /*nav links*/
    #header ul li { float:left;white-space:nowrap;}
    #header ul li a {float:left;display:block;color:#444;padding:5px 0 5px 10px;}
    #header ul li:first-child a {padding-left:0;}
    #header ul li a:focus, #header ul li a:hover, #header ul li a:active, #header ul .current_page_item a, #header ul .current_page_ancestor a{background:#dddddd;text-decoration:none;},
    body.home #header ul li.home a, #header ul .current-cat a, #header ul .current-cat-parent a, body.category-blog #header ul .blog a {text-decoration:none;}
    body.shopping_cart #header ul  .current_page_item a  {text-decoration:none;}
    
    /*search || Page Navi*/
    .searchWrap, .page_navi {overflow:hidden;}
    #searchform, .page_navi ul {float:right;}
    #searchform input {float:left;padding:2px;}
    #s {width:213px;margin:0 6px 0 0;}
    #searchFind {margin:0;}
    .page_navi ul li a {font-size:0.9em;}
    
    /*LR Navi*/
    #header .LR_navi {padding:10px 0;}
    #header .LR_navi a {font-size:0.9em;padding-top:10px;}
    
    /*Main Category Navi || Hybrid navi*/
    #header .main_navi {clear:both;float:left;padding-top:10px;}
    #header .hybrid_navi ul {float:left;}
    #header .hybrid_navi ul.categories, #header .hybrid_navi ul.pages {margin-left:10px;}
    
    /*Secondary Navi*/
    #header .secondary_navi {padding-top:10px;}
    
    /*Hybrid Navigation Drop Downs*/
    #header .hybrid_dropnavi ul {position:relative;}/*for IE7*/
    #header .hybrid_dropnavi ul, #header .hybrid_dropnavi ul ul {z-index:900;}
    #header .hybrid_dropnavi ul li {position:relative;}
    #header .hybrid_dropnavi ul li.drop
    #header .hybrid_dropnavi ul li a {padding:5px 10px;}
    #header .hybrid_dropnavi ul li:first-child a {padding-left:0;}
    #header .hybrid_dropnavi ul ul {position:absolute;display:none;top:20px;left:0;background:#dddddd;float:none;}
    #header .hybrid_dropnavi ul ul li, #header .hybrid_dropnavi ul ul li a {text-align:left;display:block;float:none;border:0 none;}
    #header .hybrid_dropnavi ul ul li a, #header .hybrid_dropnavi ul li:first-child ul  a, #header .hybrid_dropnavi ul ul li:first-child a {;padding:10px;text-decoration:none;}
    #header .hybrid_dropnavi ul ul li a:focus, #header .hybrid_dropnavi ul ul li a:hover {background:#d2d2d2;text-decoration:none;}

Viewing 1 replies (of 1 total)
  • There have been any number of posts about losing the ‘current’ entry on the menu when navigating to sub-menu items. I’m guessing that’s what you’re referring to. If it is, I *think* the last outcome I read was that it can’t be done.

    As for the spacing between items, the general strategy is to use Firebug or similar to identify the ruling style rule.

    I can’t be any more specific because you don’t provide a link to your site.

    HTH

    PAE

Viewing 1 replies (of 1 total)

The topic ‘menu coloring and spacing’ is closed to new replies.