Navigation

Navbar, responsiv utan javascript

Detta är ett exempel på en navigation/meny som är lika bred som webbläsarfönstret. Menyn är responsiv och på skärmar med width mindre än 768px ändras flex-direction till column istället för row.

nav elementet med klassen .navbar är själva navbaren. Länkarna som utgör navigationen är samlade i en lista med klassen .nav. Om du inte behöver en dropdown i din meny så kan du ta bort de delarna.

Med brand menas en logotyp eller ett namn i text. Du ersätter alltså texten med en bild om du använder en logotyp.

Om du önskar en meny som linjerar med resten av sidan behöver du skapa en container i navbaren för innehållet. Du behöver då justera .navbar klassen. Du kan se undersöka det om du inspekterar navigationen på den här sidan.

html

<nav class="navbar">
    <a class="brand" href="#">Brand</a>
    <ul class="nav">
        <li class="nav-item">
            <a class="nav-link" href="index.html">Hem</a>
        </li>
        <li class="nav-item">
            <a class="nav-link active" href="#">Navigation</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#">Dropdown</a>
            <ul class="nav dropdown-content">
                <li class="dropdown-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="dropdown-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </li>
    </ul>
</nav>

css

:root {
    --color-light: #f0f0f0;
    --color-dark: #212121;
    --color-shadow: rgba(33, 33, 33, 0.2);
    --color-secondary:#4a0080;
}
.navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 1rem;
    background-color: var(--color-light);
    font-size: 1.25rem;
}
.nav {
    list-style: none;
    display: flex;
    flex-direction: row;
}
.nav a {
    text-decoration: none;
}
.nav-item {
    padding-right: 1rem;
}
.nav-item:first-child {
    padding-left: 1rem;
}
.nav-link {
    color: var(--color-secondary);
}
.nav-link:hover {
    text-decoration: none;
    color: var(--color-dark);
}
.brand {
    white-space: nowrap;
}
.active {
    color: var(--color-dark);
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 10rem;
    box-shadow: 0px 8px 16px 0px var(--color-shadow);
    background-color: var(--color-light);
    padding: 0.5rem;
    z-index: 1010;
}
.dropdown-item {
    padding: 0.25rem 0.5rem;
}
.dropdown:hover .dropdown-content {
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar .nav {
        flex-direction: column;
    }
    .nav-item:first-child {
        padding-left: 0rem;
    }
}

För en navbar som är sticky (sitter fast i sidans top vid scroll) så kan du lägga till följande klass på nav elementet.

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
}