Navigation example

Sample styling sheet for a navigation menu.

When creating menu items:

  • Apply padding to the internal <a> tags to provide more clickable surface area.
  • Make the <a> tags block elements with display: block;. This means that you can control their height with their padding and content.
  • Add space between flex items with the gap property. Define gap as a variable.
  • Use margin: auto to fill available space between flex items, like place a flex item on the other side of a flex container.

Here is the HTML:

<nav>
    <ul class="site-nav">
        <li><a href="/">Home</a></li>
        <li><a href="/features">Features</a></li>
        <li><a href="/pricing">Pricing</a></li>
        <li><a href="/support">Support</a></li>
        <li class="nav-right">
            <a href="/about">About</a>
        </li>
    </ul>
</nav>

Horizontal nav styling. The ul is the flex container, while each li is a flex item:

:root {
    --gap-size: 1.5rem;
}

.site-nav {
    display: flex;
    gap: var(--gap-size);
    padding: 0.5rem;
    list-style-type: none;
    background-color: #5f4b44;
}

.site-nav > .nav-right {
    margin-inline-start: auto;
/*  margin-left: auto; */
}

.site-nav > li > a {
    display: block;
    padding: 0.5em 1em;
    background-color: #cc6b5a;
    color: white;
    text-decoration: none;
}