> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/examples/nav-bar.md).

# nav bar

{% tabs %}
{% tab title="Result" %}
{% embed url="<https://codepen.io/lochiwei/pen/ZEKwBjN>" %}

{% endtab %}

{% tab title="CSS" %}

```css
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box; 
}

body {
    background-color: #eee;
}

nav {
    display: flex;
    padding: 0.5em;
    background-color: gray;
}

nav > a {

    text-decoration: none;
    text-align: center;
    padding: 0.5em 1em;

    background-color: #57ce13;
    color: white;
}

/*
    ⭐️ not first A     
     = A + A
     = A:not(:first-child)
     = A:nth-child(n+2)
 */
nav > a + a {
    /* ⭐️ add margin to flex items */
    margin-inline-start: 0.5em;
}

nav > a:last-child {
    font-weight: bold;
    background-color: red;

    /* ⭐️ `margin: auto` will fill all available space */
    margin-inline-start: auto;
}

/* ⭐️ :hover 要擺在正常的 a 後面，不然會沒有作用 */
nav > a:hover {
    background-color: blueviolet;
}
```

{% endtab %}

{% tab title="HTML" %}

```markup
<nav>
  <a href="https://twitter.com">Twitter</a>
  <a href="https://facebook.com">Facebook</a>
  <a href="#">Sponsor</a>
</nav>
```

{% endtab %}
{% endtabs %}