Member Avatar for Wailintun

Help me again!I won't forget your grace.
how to make header bar as http://www.harobikes.com/bmx/

  • 2 Contributors
  • 3 Replies
  • 69 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

As wants that Haro-style header and asked for code, here is a compact, reliable pattern to reproduce the look: a fixed-height header with a centered max-width container, logo on the left, and a horizontal nav on the right. Use flexbox to vertically center items and keep spacing consistent; use a single image sized to the header height (or an srcset for retina). Post your HTML/CSS as suggested if this doesn't match exactly.

<header class="site-header">
  <div class="wrap">
    <a class="logo" href="/" aria-label="Brand">
      <img src="logo.png" alt="Brand" />
    </a>
    <nav class="main-nav" aria-label="Primary navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Models</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

.site-header { background:#fff; box-shadow:0 1px rgba(0,0,0,0.08); }
.wrap { max-width:1100px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; height:80px; padding:0 20px; }
.logo img { height:46px; width:auto; display:block; }
.main-nav ul { display:flex; list-style:none; margin:0; padding:0; }
.main-nav a { padding:10px 14px; text-decoration:none; color:#222; display:block; }
@media (max-width:768px) { .main-nav { display:none; } /* replace with mobile menu */ }

Quick troubleshooting: remove default ul margins, ensure .logo img is display:block, use z-index if the header overlaps content when position:fixed, and match font, letter-spacing and hover styles to get the exact feel. For flexbox details see A Guide to Flexbox.

Recommended Answers

All 3 Replies

Member Avatar for JorgeM

Which header bar? Do you mean navigation menu? Did you take a look at the page's source code to give you an idea?

Member Avatar for Wailintun

with a haro logo .I already watched it and I made a menu like that but it's not same.

Member Avatar for JorgeM

Post the code you are having trouble with so we can take a look and help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.