Back to the list

Header

The header has to be placed outside the container.

File to include

@import "components/header";

Script to include

<script src="/lib/header.js"></script>

Plain primary

Demo here

<header class="header" data-header-style="plain-primary" data-position="fixed">
    <a href="#" class="logo">
        <img src="/assets/images/logo-fajny-css-white.svg" alt="logo">
    </a>

    <button class="burger" data-color="white"></button>

    <nav>
        <a href="#" class="active">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

Plain white

Demo here

<header class="header" data-header-style="plain-white">
    <a href="#" class="logo">
        <img src="/assets/images/logo-fajny-css.svg" alt="logo">
    </a>

    <button class="burger" data-color="primary"></button>

    <nav>
        <a href="#" class="active">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

Transparent primary

Demo here

<header class="header" data-header-style="transparent-primary" data-position="absolute">
    <a href="#" class="logo">
        <img src="/assets/images/logo-fajny-css.svg" alt="logo">
    </a>

    <button class="burger" data-color="primary"></button>

    <nav>
        <a href="#" class="active">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

Transparent white

Demo here

<header class="header" data-header-style="transparent-white" data-position="absolute">
    <a href="#" class="logo">
        <img src="/assets/images/logo-fajny-css-white.svg" alt="logo">
    </a>

    <button class="burger" data-color="white"></button>

    <nav>
        <a href="#" class="active">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
        <a href="#">Link</a>
    </nav>
</header>

Attributes

Name Example value Possible values Default Required
data-header-style transparent-primary "plain-primary" | "plain-white" | "transparent-primary" | "transparent-white" plain-primary No
data-position fixed "absolute" | "fixed" None No