Posted By

kstetson on 06/03/09


Tagged

css wordpress style tags navigation jquery last li first


Versions (?)

Who likes this?

7 people have marked this snippet as a favorite

rossjha
BrittanyL
lilumi
tmbrenneke
fabi
dbrouse
maxvee8


In wordpress navigation, target the first & last li tags & style


 / Published in: jQuery
 

Use javascript to add a class of last onto the first and the last li tags in the navigation (add to global.js). Then use css to style. For instance, if the first li is home, you can set the css to hide this link (if you want the logo to act as your home link instead). You may have a background pattern that you want to turn off on your last li tag, you can set the css background to none in this case.

  1. // Add to global.js:
  2.  
  3. // Add class of last to the last li tag (in the top navigation)
  4. $('#header li:last').addClass('last');
  5. // Add class of first to the first li tag (in the top navigation)
  6. $('#header li:first').addClass('first');
  7.  
  8.  
  9. // Add to CSS:
  10.  
  11. #header li.first
  12. {
  13. display: none;
  14. }
  15.  
  16. #header li.last
  17. {
  18. background: none;
  19. padding-right: 0;
  20. }

Report this snippet  

You need to login to post a comment.