How to make a site hat in HTML and CSS

Learn how to create a website header with HTML & CSS, including a step-by-step example.

Creating a Site Hat with HTML and CSS

A site hat is a kind of web page header that displays a logo, as well as a navigation bar. It is often used at the top of the page, and can be used to increase brand recognition and make navigation easier for users. In this tutorial, we'll be creating a site hat using HTML and CSS.

Step 1: Setting Up the HTML

We'll start by creating the structure of the page with some basic HTML. This will include a header, a navigation bar and a logo. We'll also add a div element to contain all of these elements. This is the HTML code:

<div class="site-hat">
  <header>
    <nav>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
      </ul>
    </nav>
    <div class="logo"></div>
  </header>
</div>

Step 2: Styling with CSS

Now, we'll add some CSS to style the elements. We'll set the background color, add a border, and adjust the font size and color. We'll also set the logo image and adjust the size and position of the navigation bar. This is the CSS code:

.site-hat {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}

.site-hat header {
  font-size: 16px;
  font-family: sans-serif;
  color: #444;
}

.site-hat .logo {
  background-image: url(logo.png);
  width: 100px;
  height: 100px;
  float: left;
  margin: 10px;
}

.site-hat nav {
  float: right;
  margin: 10px;
}

.site-hat nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-hat nav li {
  display: inline-block;
}

.site-hat nav a {
  display: block;
  padding: 5px 10px;
  color: #444;
  text-decoration: none;
}

Step 3: Adding JavaScript

Finally, we'll add some JavaScript to make the navigation bar more interactive. We'll add a drop-down menu when the user hovers over a link, and we'll add a smooth scrolling effect when the user clicks on a link. This is the JavaScript code:

// Drop-down menu
let menuLinks = document.querySelectorAll('nav li a');

menuLinks.forEach(function(link) {
  link.addEventListener('mouseenter', function() {
    let submenu = link.nextElementSibling;

    if (submenu) {
      submenu.classList.add('open');
    }
  });

  link.addEventListener('mouseleave', function() {
    let submenu = link.nextElementSibling;

    if (submenu) {
      submenu.classList.remove('open');
    }
  });
});

// Smooth scrolling
let scrollLinks = document.querySelectorAll('nav a');

scrollLinks.forEach(function(link) {
  link.addEventListener('click', function(e) {
    e.preventDefault();

    let href = link.getAttribute('href');
    let offsetTop = document.querySelector(href).offsetTop;

    window.scrollTo({
      top: offsetTop,
      behavior: 'smooth'
    });
  });
});

And that's it! We've created a site hat using HTML, CSS and JavaScript. Now, all you need to do is add your own logo and navigation links, and you'll have a custom site hat for your website.