Search code examples
htmlcssnavbar

Navbar li can not work properly with header

I'm trying to create a website, but cannot find the reason as to why the 2 middle options ("gallery" & "about") doesn't work properly.

The problem in question:

<!DOCTYPE html>
<html>
  <head>
    <!--writting font title-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Whisper&display=swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="style.css">
    
  </head>

  <header>
    <div class="header">
      <div class="inner_header">
        <div class="logo_container">
          <h1>Céramique & Porcelaine</h1> 
        </div> 
      </div>      
    </div>
  </header>



<body>


    <div class="menu_navbar">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>    
    </div>
</body>




</html>

CSS

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

body{
    background-color: #101010;
    background-size: cover;
    background-position: center;
    font-family: sans-serif;
}


.header{
   width: 100%;
   height: 200px;
   display: block;
   background-color: #101010;
}

.inner_header{
    width: 1000px;
    height: 100%;
    display: block;
    margin: 0 auto;
    background-color: red;
}

.logo_container{
    height: 100%;
    display: table;
    float: right;
    position: absolute;
    right: 40%;
    
}

.logo_container h1{
    color: bisque;
    font-family: "Whisper", cursive;
    font-weight: 400;
    font-style: normal;
}

.menu_navbar{
    background: blue;
    text-align: center;
}

.menu_navbar ul{
    display: inline-flex;
    list-style: none;
    color: bisque;
    text-align: center;
}

.menu_navbar ul li {
    width: 120px;
    margin: 15px;
    padding: 15px;
}

.menu_navbar ul li a{
    text-decoration: none;
    color: bisque;
}

when I removed the header part in the HTML folder, I realised the navbar worked, but when I put it back the same problem occurs. I want all options in the navigation bar to work.

Thanks!

Solution

  • First off, as Mehdi said, the header is not supposed to be outside the body tags.

    Usually, when this problem occurs, something is "in front" of the link you're trying to click. Think of it as an (often) invisible wall that your mouse can't go through to reach the link.

    I recreated your HTML and CSS in a Sandbox, and went to "Inspect" in Google Chrome (right click on an element, go to "Inspect").

    Chrome then highlights the element you right-clicked on in the DOM. When I right click on your "Gallery" or "About" links, Google Chrome highlights:

    <div class="logo_container">
      <h1>Céramique &amp; Porcelaine</h1> 
    </div>

    Which isn't the Gallery or About link. But the element at the top of your page: the logo.

    Another thing that Chrome shows, when you hover over an element in the "Inspect" window is where that element is, and how much space it takes.

    enter image description here

    In this image, I have the logo container selected, Chrome shows in light blue the space it takes on your page. As you can see, the light blue rectangle overlaps with your Gallery and About buttons. But not Home or Contact. This is why those buttons still work; there's nothing in front of them.

    To fix this, change the height of your logo container to something a bit smaller, like 50px for example.

    Whenever you are dealing with problems like these, until you are experienced: go into Chrome's dev tools to figure out what's wrong by visually inspecting your page through those tools.