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.


Copy this code and paste it in your HTML
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.