Navigation Styling
  • 04 May 2023
  • 1 Minute to read
  • Dark
    Light
  • PDF

Navigation Styling

  • Dark
    Light
  • PDF

Article summary

When using the WineDirect navigation tag, the pages are rendered as ul/li elements in your HTML. The best way to style the navigation is by wrapping it in a div that can be targeted. If the navigation tag were wrapped in a div with the class 'mainMenu,' the styling would look as follows. 

.mainMenu ul { }
.mainMenu ul li { }

Additional system navigation classes

Certain classes are added in the navigation output so they can be styled. 

The current page link: .mainMenu ul li a.v65-selected { }
The parent link of the current page: .mainMenu ul li a.v65-pageAParent { }
The current page link in the sub-menu: .v65-left selected { }
The "Home" link: .v65-home { }


Was this article helpful?