[SOLVED] Excluding links from the navigation module

[jana]

My question is related to the second part of this question, however, it looks like you can't customize .module-navlinks .module-list-item without having the items set to "display: none;" show up again (only the item's background, not the links themselves).

What am I missing here? ETA: And that's what the css looks like

.module-navlinks{padding: 0;}
.module-syndicate .module-header, .module-navlinks .module-header{display: none; }
.module-navlinks .module-list-item{background: #65605b; padding: 5px; margin: 0; border-bottom: 2px solid #423c37; font-weight: bold; text-transform: uppercase;}
.module-list-item .read, .module-list-item .memories, .module-list-item .network{display: none;}
.module-navlinks .module-list-item a{text-decoration: none; }

Comments

[poulpette]

That's because you're styling the list items themselves, not the links you've hidden.
imagine the list is a box, a transparent one. Inside were the links, which you'd 'painted' transparent.
Now, if you paint the boxes, the links are still transparent, but not the boxes. That's what's causing the appearance of the lines were there should have been links.

The fix is easy, instead of applying your styling to the list items, just apply it to the links themselves. Just add display:block to them so that they behave like list items.
Like so:

.module-navlinks a { 
  //Using .module-navlinks should be enough to target the links I think
  display: block; 
  background: #65605b; 
  padding: 5px; margin: 0; 
  border-bottom: 2px solid #423c37; 
  font-weight: bold; 
  text-transform: uppercase;
  text-decoration: none;}

[jana]

I knew there was a simple solution ;) I had tried customizing the links themselves, but without the display: block; the links width was equal to the width of the text. I always forget the display part, no matter how often I work with css layouts... Thanks so much for your help! :)