<header>
    <nav class="header-nav01">
        <div class="logo-nav01">Logo</div>
        <input type="checkbox" id="click-nav01">
        <label for="click-nav01" class="menu-btn-nav01">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Blog</a></li>
        </ul>
    </nav>
</header>

Advertisement

<header>
    <nav class="header-nav001">
        <div class="logo-nav001">Logo</div>
        <input type="checkbox" id="click-nav001">
        <label for="click-nav001" class="menu-btn-nav001">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li class="last-li-nav001"><a href="#">Contact</a></li>
            <li><a href="#"><button class="button-nav001">Button</button></a></li>
            <li><a href="#"><button class="button-nav001">Button</button></a></li>
        </ul>
    </nav>
</header>

Advertisement

<header>
    <nav class="header-nav31">
        <div class="logo-nav31">Logo</div>
        <input type="checkbox" id="click-nav31">
        <label for="click-nav31" class="menu-btn-nav31">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>

Advertisement

<header>
    <nav class="header-nav41">
        <div class="logo-nav41">Logo</div>
        <input class="search-nav41" type="search" name="#" id="#" placeholder="search">
        <input type="checkbox" id="click-nav41">
        <label for="click-nav41" class="menu-btn-nav41">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Contact</a></li>
            <li><input class="mobile-search-nav41" type="search" name="#" id="#" placeholder="search"></li>
        </ul>
    </nav>
</header>
<header>
    <nav class="header-nav51">
        <div class="logo-nav51">Logo</div>
        <input type="checkbox" id="click-nav51">
        <label for="click-nav51" class="menu-btn-nav51">
            <i class="fas fa-bars"></i>
        </label>
        <ul>
            <li><a class="active" href="#"><i class="fas fa-home"></i> Home</a></li>
            <li><a href="#"><i class="fas fa-exclamation-circle"></i> About</a></li>
            <li><a href="#"><i class="fas fa-cog"></i> Service</a></li>
            <li><a href="#"><i class="fas fa-phone-alt"></i> Contact</a></li>
        </ul>
    </nav>
</header>