CODEWITHSUNDEEP
htmlcsshyperlink
Igor Gryp
Igor Gryp

Reputation: 47

Logo as link to Home-page

When I set the logo as a link, my menu moves to the right. When I inspect the menu, I see that I get an extra menu link to the left of the menu that is not visible otherwise and which leads to index.html Does anyone know what is the reason for this?

#logo {
  height: 64px;
  position: absolute;
  left: 20px;
}

#menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  width: 100%;
  background-color: #000000;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav a {
  text-align: center;
  font-size: 25px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  color: white;
  text-decoration: none;
  transition: .9s;
}

nav a:hover {
  background-color: orange;
  transition: .9s;
}
<nav>
  <div>
    <a href="index.html"><img id="logo" src="https://via.placeholder.com/400x400.jpg" alt=""></a>
  </div>
  <div id="menu">
    <a href=index.html>Home</a>
    <a href=index.html>About</a>
    <a href=index.html>Contact</a>
  </div>
</nav>

Upvotes: 0

Views: 785

Answers (1)

Vignesh PV
Vignesh PV

Reputation: 377

Change the css nav ato nav #menu a- Hope it fix the style.

#logo {
  height: 64px;
  position: absolute;
  left: 20px;
}

#menu {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav {
  width: 100%;
  background-color: #000000;
  height: 64px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

nav #menu a {
  text-align: center;
  font-size: 25px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  color: white;
  text-decoration: none;
  transition: .9s;
}

nav a:hover {
  background-color: orange;
  transition: .9s;
}
<nav>
  <div>
    <a href="index.html"><img id="logo" src="https://via.placeholder.com/400x400.jpg" alt=""></a>
  </div>
  <div id="menu">
    <a href=index.html>Home</a>
    <a href=index.html>About</a>
    <a href=index.html>Contact</a>
  </div>
</nav>

Upvotes: 2

Related Questions