Styling a single top level navigation link differently - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Styling a single top level navigation link differently

  • Styling a single top level navigation link differently
  • Is there a way to apply a different style to one navigation link? I am using the horizontal menu and would like the link to one page to stand out more than the others.
  • You could use pure CSS with nth-child or some sort of other selector, but the problem is it's only for modern browsers LINK

    I'd suggest using jQuery to tag the item with a CSS class you can then style.  If the page is public somewhere I can give you the script if you'd like?

    Something like this perhaps?
    $(document).ready(function()
       //Find the element, give it a class
      $("#yourmenuwrapper :contains('FAQ')").addClass("important-menu-item");
    );

  • Thanks for the suggestions. I'll give them a try.