htmlcssanchor

How do I make my website Header clickable so it redirects me to the home page?

I'm learning web development and I've encountered another beginner challenge, I want to make the header text of my website, clickable, so that it also redirects me to the homepage, how could I achieve this?, may you help me please?.

The homepage text is "Cookieland" and I want it to be clickable so that it redirects me to "index.html" homepage, I've tried "href" but I couldn't find a way to make it look like a normal text and not a link.

Here is my code:

h1 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 50px;
  color: #925800;
  text-align: center;
  background-color: #d8ad6a;
  height: 105px;
  padding-top: 30px;
  margin: -25px;
}

body {
  background-color: #eeeeee;
  overflow-x: hidden;
  margin: 0px;
}


/* Styling for the search container */

.search-container {
  text-align: center;
  padding: 0px;
  margin: -20px;
  background-color: #d8ad6a;
  height: 55px;
}


/* Styling for the search input */

.search-input {
  padding: 10px;
  border-radius: 20px;
  border: 2px solid #ccc;
  width: 500px;
  margin-left: 80px;
}


/* Styling for the search button */

.search-button {
  padding: 10px 20px;
  border-radius: 20px;
  border: 2px solid #ccc;
  background-color: #f0f0f0;
  color: #333;
  cursor: pointer;
  transition: background-color 0.3s;
}


/* Styling for the search button on hover */

.search-button:hover {
  background-color: #e0e0e0;
}


/* Styling for the navigation bar */

h1 {
  text-align: center;
}

.navbar ul {
  list-style-type: none;
  background-color: #d8ad6a;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  text-align: center;
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 15px;
  display: block;
  text-align: center;
}

.navbar a:hover {
  background-color: #f2e596;
}

.navbar li {
  display: inline-block;
}

.navbar {
  margin-top: 20px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Best Cookies: Buy the best chocolate cookies!</title>
  <link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <!--This is the website header-->
  <div>
    <h1 id="Cookieland">Cookieland</h1>
    <a href="Cookieland" itemprop="url" class="site-header"></a>
    <form class="search-container" action="#">
      <input type="text" class="search-input" placeholder="Search Cookies">
      <button type="submit" class="search-button">Search</button>
    </form>
    <nav class="navbar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="order.html">Order</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>
</body>

</html>

Solution

  • This will turn your header into a link that will redirect to index.html

    <a href='./index.html'><h1 id="Cookieland">Cookieland</h1></a>

    If you don't want it to look like a link, you can use this CSS here:

    .Cookieland{ 
      text-decoration: none;
      cursor: pointer;
}

    This will remove the link's underline and also make it so your cursor turns into a pointer when hovering over the link.