.navigation-toogle | Class for the button that toggles navigation visibility. Styles size, position, and z-index. |
.navigation | Base class for the navigation container. Manages visibility, position, fixed placement, and overlay effect. |
.navigation.hidden | Class dynamically applied to '.navigation' to hide it by adjusting its position and opacity. |
.navigation-content | Class for the main content area within the navigation panel. Defines background, dimensions, padding, and overflow handling. Max-width is adjusted on screens 1024px or wider. |
.navigation-items | Class for the list (ul) that holds navigation links. Styles as a grid with a defined gap. |
.navigation-item | Class for individual list items (li) within the navigation menu. |
.navigation-item > * (e.g., a) | Styles applied to direct children (typically anchor tags) of '.navigation-item'. Defines alignment, color, font size, padding, and transition. Font size is adjusted on screens 1024px or wider. |
.navigation-item > *.active (e.g., a.active) | Class dynamically applied to an active navigation link. Changes background color, text color, and disables pointer events. |
.navigation-item > *:hover (e.g., a:hover) | Styles applied when hovering over a navigation link. Changes the background color. |