Question 181591 in Html Question posted in
Some basic documentation can be found here.

Html – CSS Flexbox hover effect not working on text in horizontal navigation bar under fixed header – how to troubleshoot?

I want to format a horizontal navigation bar below a fixed header for a site i am making. I was able to do so, but now the hover effect is not working. What I mean is that the hover effect only works when I align my cursor with the bottom edge of the navigation bar where a link is directly above it. I want the hover effect to work when my cursor hovers over the text. Please help!! Thank you!

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {
  margin: 0;
  padding: 0;
}

/* all header stuff*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px; 
  background-color: #c7c7c7; 
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 1.0); 
  z-index: 999; /* Ensure the header is above the other elements */
}

.logo-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 210px; /* Adjust width as needed */
  height: auto;
  margin-right: 10px; /* Adjust margin as needed */
}

.title {
  margin-bottom: 5px;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 40px;
}

.subheading {
  font-family: 'Raleway', arial, sans-serif;
  font-size: 24px;
  margin-top: 5px;
}

/*all nav bar stuff*/
nav {
  background-color: #c7c7c7;
  height: 40px;
  margin-top: 120px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align:center;
  font-family: 'Raleway', arial, sans-serif;
  font-size: 20px;
}

nav li {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px;
}

nav li a:hover {
  color: #f45c2c;
  text-decoration: underline;
}

<!DOCTYPE html> 
<html>
    <head>
        <title>Bioreactor</title>
    <link href="Bioreactor.css" rel="stylesheet" type="text/css">
    </head>

    <body>
    <header>
      <div class="logo-container">
        <img src="logo.png" alt="Logo" class="logo">
        <div>
          <h1 class="title">PAK BioSolutions Process Design | Home</h1>
          <h3 class = "subheading">Driving Advancements in Biopharmaceutical Manufacturing</h3>
        </div> 
      </div>
    </header>

    <nav>
      <ul>
        <li><a href="Bioreactor.html">Bioreactor</a></li>
        <li><a href="Chromatography.html">Chromatography</a></li>
        <li><a href="Virus Inactivation.html">Virus Inactivation</a></li>
        <li><a href="0.2 Micron Filtration.html">0.2 Micron Filtration</a></li>
        <li><a href="Virus Filtration.html">Virus Filtration</a></li>
      </ul>
    </nav>
</body>
</html>
Tags:

2

Answers


  1. 0

    try putting the element ul in nav li a:hover it should work

    Login or Signup to reply.
  2. 0

    add ul to this then try it again to nav li a:hover

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search