Como Criar um Header com Hero e 3 Tipos de Menus em HTML, CSS e Bootstrap 5

Neste tutorial você vai aprender a montar o topo completo de um site, incluindo:

Uma hero section de destaque
Três variações de menus profissionais
Responsividade e visual moderno
Código limpo, pronto para copiar

Perfeito para seu portfólio, landing pages e sites institucionais.

📁 Arquivo: hero.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hero 1 - Menu Transparente</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <!-- CSS personalizado -->
  <link rel="stylesheet" href="hero.css">
</head>
<body>

  <!-- NAVBAR TRANSPARENTE FIXA -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-transparent glass-nav">
    <div class="container">
      <a class="navbar-brand" href="#">JVV Site</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav1">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav1">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Início</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Sobre</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Serviços</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- HERO -->
  <header class="hero d-flex align-items-center text-white">
    <div class="container text-center">
      <h1 class="display-4 fw-bold">Transforme seu site com um header moderno</h1>
      <p class="lead">Menu transparente com visual de impacto.</p>
      <a href="#menu" class="btn btn-warning mt-3">Explorar</a>
    </div>
  </header>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

📁 Arquivo: hero.css

/* HERO visual completo */
.hero {
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1526406915894-7bcd65f60845?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  padding-top: 100px;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
}

/* Efeito vidro na navbar */
.glass-nav {
  backdrop-filter: blur(6px);
  background-color: rgba(0, 0, 0, 0.4) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Estilização da navbar */
.navbar .nav-link {
  color: #ffffff !important;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover {
  color: #ff6a00 !important;
}

/* Hero text */
.hero h1 {
  font-size: 3rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.25rem;
}

📁 Arquivo: hero1.html

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hero 1 - Menu Slide Lateral</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />

    <!-- CSS personalizado -->
    <link rel="stylesheet" href="hero1.css" />
</head>

<body>

    <!-- NAVBAR -->
    <nav class="navbar navbar-dark fixed-top bg-dark shadow">
        <div class="container">
            <a class="navbar-brand" href="#">JVV Slide</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#slideMenu">
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>
    </nav>

    <!-- OFFCANVAS -->
    <div class="offcanvas offcanvas-start text-bg-dark" tabindex="-1" id="slideMenu">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title">Navegação</h5>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">Início</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Sobre</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Serviços</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
            </ul>
        </div>
    </div>

    <!-- HERO -->
    <header class="hero d-flex align-items-center text-white">
        <div class="container text-center">
            <h1 class="display-4 fw-bold">Menu Slide com Hero Impactante</h1>
            <p class="lead">Design moderno e funcional para mobile e desktop.</p>
            <a href="#menu" class="btn btn-warning mt-3">Ver em ação</a>
        </div>
    </header>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>

📁 Arquivo: hero1.css

.hero {
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1600&q=80");
  background-size: cover;
  background-position: center;
  padding-top: 100px;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 700;
}

.hero p {
  font-size: 1.25rem;
}

.navbar {
  background-color: #1c1c1c;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.offcanvas {
  background-color: #1c1c1c;
}

.offcanvas .nav-link {
  color: #ffffff;
  font-size: 1.1rem;
  padding: 0.5rem 0;
}

.offcanvas .nav-link:hover {
  color: #ff6a00;
}

.btn-close-white {
  filter: invert(1);
}

📁 Arquivo: hero2.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hero 3 - Menu Transparente com Scroll</title>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />

  <!-- CSS personalizado -->
  <link rel="stylesheet" href="hero2.css" />
</head>
<body>

  <!-- MENU TRANSPARENTE -->
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-transparent" id="scrollNav">
    <div class="container">
      <a class="navbar-brand" href="#">JVV Glass</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav3">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="nav3">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Projetos</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Contato</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- HERO -->
  <header class="hero d-flex align-items-center text-white">
    <div class="container text-center">
      <h1 class="display-4 fw-bold">Menu Transparente com Scroll</h1>
      <p class="lead">Navbar sobre a hero que ganha destaque ao rolar.</p>
      <a href="#menu" class="btn btn-warning mt-3">Explorar</a>
    </div>
  </header>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <!-- Scroll Effect JS -->
  <script>
    const nav = document.getElementById('scrollNav');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 10) {
        nav.classList.add('scrolled');
      } else {
        nav.classList.remove('scrolled');
      }
    });
  </script>
</body>
</html>

📁 Arquivo: hero2.css

/* HERO visual */
.hero {
  height: 100vh;
  background-image: url('https://images.unsplash.com/photo-1543269865-cbf427effbad?auto=format&fit=crop&w=1600&q=80');
  background-size: cover;
  background-position: center;
  padding-top: 100px;
  display: flex;
  align-items: center;
  text-align: center;
  color: white;
}

/* Navbar transparente no topo */
.navbar {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  z-index: 1030;
}

/* Quando rola a página, aplica fundo escuro */
.scrolled {
  background-color: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Links */
.navbar .nav-link {
  color: #ffffff !important;
}

.navbar .nav-link:hover {
  color: #ff6a00 !important;
}

🚀 E agora?

Você acabou de ver, na prática, como criar um header completo com hero e três estilos diferentes de menus profissionais usando HTML, CSS e Bootstrap 5.

Esses exemplos são mais do que só visual:
Eles mostram como adaptar um mesmo layout a diferentes tipos de projetos — seja um site institucional, uma landing page moderna, um portfólio criativo ou até mesmo um sistema web.

📚 O que você aprendeu aqui:

✅ Como estruturar um layout com hero fullscreen
✅ Como usar menus fixos (sticky-top), laterais (offcanvas) e transparentes com scroll
✅ Como aplicar imagens de fundo e criar contraste com o menu
✅ Como organizar seus arquivos em HTML e CSS separados (profissionalismo!)
✅ Como deixar o layout limpo, responsivo e com boa usabilidade

💡 Próximos passos:

👉 Brinque com as imagens, troque as cores, adicione sua logo.
👉 Personalize os menus com seus próprios links e efeitos.
👉 Combine com outras seções, como cards de serviços, seções “Sobre mim”, portfólios, etc.
👉 E claro: use esses headers nos seus próprios projetos reais.

📸 Dica de ouro:

Tire print dos seus headers e poste nas redes sociais mostrando seu progresso como dev.
Marque o projeto, use hashtags e, se quiser, me marque também! 😉

💬 Tem dúvidas ou sugestões?

Comenta aqui ou manda uma mensagem. A ideia é continuar evoluindo junto com você.

✅ Conclusão

Esses três tipos de menus ajudam você a entregar uma experiência moderna e adaptável ao seu projeto. Você pode aplicar:

Menu fixo para blogs e sistemas
Slide para apps e páginas mobile
Transparente com efeito para landing pages e portfólios

💡 Tire print do projeto e compartilhe seus resultados no Instagram com o código #JVVDev

Menu

Como Criar um Header com Hero e 3 Tipos de Menus Modernos em HTML, CSS e Bootstrap 5

Como Criar um Header com Hero e 3 Tipos de Menus em HTML, CSS e Bootstrap 5

🚀 E agora?

📚 O que você aprendeu aqui:

💡 Próximos passos:

📸 Dica de ouro:

💬 Tem dúvidas ou sugestões?

✅ Conclusão

João Victor - Desenvolvedor Web & Estrategista em MKT Digital

Você também pode gostar

Como Criar Menus de Navegação com Bootstrap 5: ...

Como Usar o Sistema de Grid do Bootstrap 5 com ...

Entenda o Sistema de Grid do Bootstrap 5: Layou...

Comentários

Siga-nos

Posts Populares

As 10 Linguagens de Programação Mais Populares ...

Os 10 Empregos em TI que Pagam Mais no Brasil e...

7 Plataformas Gratuitas para Aprender Programaç...

Frameworks e Bibliotecas Mais Usados em 2025 (e...