HTML Templates •
Last updated: January 21, 2026

Header and Hero Section

Brandflow HTML Site Template

Table of Contents

The Header and Hero are the first things visitors see. Here is how to customize them in Brandflow.

Header (Navigation)

The header code is located at the top of the <body> tag, inside <header class="header-area ...">.

To change the logo:

  1. Find <div class="header-logo">.
  2. Update the src of the <img> tag:
<img src="assets/images/header-logo.svg" alt="Brandflow">

The menu uses a grid system (grid-cols-12).

  • Left: Logo (col-span-2)
  • Center: Navigation Links (col-span-8)
  • Right: Search/Action buttons (col-span-2)

To add a Dropdown: Brandflow supports nested menus.

   <li class="group relative">
      <a href="#">Services</a>
      <ul class="submenu ...">
         <li><a href="service-1.html">Service 1</a></li>
      </ul>
   </li>

Hero Section

The Hero section immediately follows the header.

Background

The hero often uses a large image:

<img class="hero-bg ..." src="assets/images/hero-bg-1.webp">

Replace this image in assets/images/ to change the vibe of the homepage.

Main Heading

The large text (e.g., “Digital Agency”) is usually in an <h1> tag with text-[80px] or larger classes.

   <h1 class="... text-white ...">
      Your <span class="text-goldenrod-800">Headline</span>
   </h1>

Use the span with text-goldenrod-800 to highlight key words in Brandflow’s signature gold color.