Home
Mike Varen
Header with logo, menu and buttons

Header with logo, menu and buttons

Header with logo, menu and buttons. If you want to toggle the visibility of the mobile menu when clicking on the hamburger menu icon you can achieve this with JavaScript by adding and removing a class that controls the visibility of the mobile menu

This tailwind example is contributed by Mike Varen, on 30-Apr-2024. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Mike Varen

3.7k

Fork Fullscreen

<div class="flex md:hidden">
        <button id="hamburger" class="text-white focus:outline-none">
          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
          </svg>
        </button>
      </div>

<nav class="hidden md:flex md:flex-grow justify-center">
        <ul class="flex justify-center space-x-4 text-white">
          <li><a href="#home" class="hover:text-secondary font-bold">Home</a></li>
          <li><a href="#aboutus" class="hover:text-secondary font-bold">About us</a></li>
          <li><a href="#results" class="hover:text-secondary font-bold">Results</a></li>
          <li><a href="#reviews" class="hover:text-secondary font-bold">Reviews</a></li>
          <li><a href="#portfolio" class="hover:text-secondary font-bold">Portfolio</a></li>
          <li><a href="#team" class="hover:text-secondary font-bold">Team</a></li>
          <li><a href="#contact" class="hover:text-secondary font-bold">Contact</a></li>
        </ul>
      </nav>

<div class="hidden lg:flex items-center space-x-4">
        <a href="#" class="bg-green-500 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded inline-block">Github</a>
        <a href="#" class="bg-blue-500 hover:bg-green-500 text-white font-semibold px-4 py-2 rounded inline-block">Download</a>
      </div>
    </div>
  </header>

<nav id="mobile-menu-placeholder" class="mobile-menu hidden flex-col items-center space-y-8 md:hidden px-8">
  <ul class="w-full text-center">
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#home" class="hover:text-secondary font-bold">Home</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#aboutus" class="hover:text-secondary font-bold">About us</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#results" class="hover:text-secondary font-bold">Results</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#reviews" class="hover:text-secondary font-bold">Reviews</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#portfolio" class="hover:text-secondary font-bold">Portfolio</a></li>
    <li class="border-b border-gray-300 pb-4 pt-4"><a href="#team" class="hover:text-secondary font-bold">Team</a></li>
    <li class="pb-4 pt-4"><a href="#contact" class="hover:text-secondary font-bold">Contact</a></li>
  </ul>
  <div class="flex flex-col mt-6 space-y-2 items-center">
    <a href="#" class="bg-green-500 hover:bg-blue-500 text-white font-semibold px-4 py-2 rounded inline-block flex items-center justify-center min-w-[110px]">Github</a>
    <a href="#" class="bg-blue-500 hover:bg-green-500 text-white font-semibold px-4 py-2 rounded inline-block flex items-center justify-center min-w-[110px]">Download</a>
  </div>
</nav>

Related Examples

Brutalist Hero

Author:
threehymns

7 months ago

1.9k
Shrinkable Header
A shrinkable header with responsive menu using a little bit of plain javascript

Author:
farid

7 months ago

814
SocialConnect - Stay Connected
SocialConnect - Stay Connected

Author:
Uwera Dorcas

1 month ago

195
Hero

Author:
Aman kumar

1 year ago

6.3k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.1k
Navbar with sub menus

Author:
Rajesh Maheshwari

4 months ago

1.5k
Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

5 months ago

719
No one
nice

Author:
Umutoniwase Yvette

1 month ago

214
header

Author:
alex_bel

1 year ago

3.4k
NFT Header with Hero

Author:
Abdul Baset Bappy

1 month ago

254
Home
html , css

Author:
Hacker Development

2 months ago

205
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

1 month ago

408

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components