CODEWITHSUNDEEP
htmlcss
Dylan
Dylan

Reputation: 29

Adding link to logo adds link to whole navbar

I added a link to the logo(image) on the navbar, but when I go to the page the whole navbar apart from the links becomes the link. How do I make it so that it only applies to the image?

As per comments I have uipdated the code with CSS and JS. I'm very new to web development, this may explain my lack of knowledge and overuse of CSS.

Ref the image.

function navHamburger() {
 var x = document.getElementById("nav-links");
 if (x.style.display === "block") {
  x.style.display = "none";
 } else {
  x.style.display = "block";
 }
}
nav {
  background-color: #fff;
}

.nav-row {
  /* margin: 0; */
  overflow: hidden;
  position: relative;
  padding: 10px;
}

.nav-row #nav-links {
  display: none;
}
.nav-row a {
  color: #0075b2;
  text-decoration: none;
  font-weight: 500;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
}

.nav-row a.icon {
  font-size: 200%;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0.1em;
  margin-right: 25px;
}

.nav-row a:hover {
  color: #19afff;
}

.main-nav {
  text-decoration: none;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.mobile-menu {
  text-decoration: none;
  list-style: none;
}

.main-nav li a:link,
.main-nav li a:visited {
  color: #0075b2;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 150%;
  font-weight: 500;
  padding: 4px;
}

.main-nav li a:hover,
.main-nav li a:active {
  border-top: 2px solid #b36500;
  border-bottom: 2px solid #b36500;
  -webkit-transition: border-bottom 0.2s;
  -o-transition: border-bottom 0.2s;
  transition: border-bottom 0.2s;
}

@media (min-width: 601px) {
  .mobile-menu {
    display: none;
  }
}

.desktop-menu {
  display: none;
  right: 0;
  top: 0;
}
@media (min-width: 601px) {
  .desktop-menu {
    display: block;
    position: absolute;
    margin-top: 30px;
    margin-right: 10px;
  }
  .nav-row {
    margin-right: 20px;
  }
  .nav-row a {
    margin-left: 20px;
  }
}

@media (min-width: 901px) {
  .desktop-menu {
    margin-top: 50px;
    margin-right: 10px;
  }
}

@media (min-width: 1290px) {
  .desktop-menu {
    margin-top: 70px;
    margin-right: 10px;
  }
}
<nav>
        <div class="nav-row">
          <div>
            <a href="index.html">
              <img
                src="resources/img/logo/fullLogo.svg"
                alt="Archer Civils & Construction Logo"
                class="logo"
              />
            </a>
          </div>
          <div class="mobile-menu">
            <div id="nav-links">
              <a href="pages/civils.html">Civils</a>
              <a href="pages/fencing.html" class="nav-mid">Fencing</a>
              <a href="pages/contact.html" class="nav-mid">Contact</a>
            </div>
            <a
              href="javascript:void(0);"
              class="icon hamburger-icon"
              onclick="navHamburger()"
            >
              <i class="fa fa-bars"></i>
            </a>
          </div>
          <div class="desktop-menu">
            <ul class="main-nav">
              <li><a href="pages/civils.html">Civils</a></li>
              <li><a href="pages/fencing.html" class="nav-mid">Fencing</a></li>
              <li><a href="pages/contact.html" class="nav-mid">Contact </a></li>
            </ul>
          </div>
        </div>
      </nav>

Upvotes: 0

Views: 1162

Answers (3)

YATIN GUPTA
YATIN GUPTA

Reputation: 955

"display:flex" is the culprit here. Due to "display:flex" css property on the link, link is taking complete line. But it is not like that other navigation items has also turned into link but because link is taking the complete width and layered above the other navigation items it must be giving feel like other navigation items has also become a same link. You can refer the below screenshot:

enter image description here

Here is the code of it:

<!DOCTYPE html>
<html>

<head>
    <style>
        .logo-link {
            display: flex;
            cursor: pointer
        }

        .logo-link img {
            max-height: 200px;
        }
    </style>
</head>

<body>
    <nav>
        <a class="logo-link" href=""><img
                src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
        <div>
            <ul>
                <li>Item1</li>
                <li>Item2</li>
            </ul>
        </div>
    </nav>
</body>

</html>

You can create your code like this to resolve this issue:

<!DOCTYPE html>
<html>

<head>
    <style>
        nav {
            width: 100%;
            height: 100px;
            background-color: bisque;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        nav .align-left {
            margin-left: 10px;
            margin-right: auto;
            height: 90%;
        }

        nav .align-right {
            margin-left: auto;
            margin-right: 10px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            width: 11%;
            height: 20%;

        }

        nav .logo-link>img {
            height: 100%;
        }
    </style>
</head>

<body>
    <nav>
        <div class="align-left">
            <a class="logo-link" href=""><img
                    src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
        </div>
        <div class="align-right">
            <div>Item 1</div>
            <div>Item 2</div>
            <div>Item 3</div>
        </div>
    </nav>
</body>

</html>

Upvotes: 1

Manjuboyz
Manjuboyz

Reputation: 7066

You're using flex for the main nav class, which takes full inline value:

fiddle to playaround.

nav {
  background-color: #fff;
}

.nav-row {
  /* margin: 0; */
  overflow: hidden;
  position: relative;
  padding: 10px;
}

.nav-row #nav-links {
  display: none;
}

img {
  height: 100px;
  width: 100px;
}

.nav-row a {
  color: #0075b2;
  text-decoration: none;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  padding: 20px;
}

.nav-row a.icon {
  font-size: 200%;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 0.1em;
  margin-right: 25px;
}

.nav-row a:hover {
  color: #19afff;
}

.main-nav {
  text-decoration: none;
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.mobile-menu {
  text-decoration: none;
  list-style: none;
}

.main-nav li a:link,
.main-nav li a:visited {
  color: #0075b2;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 150%;
  font-weight: 500;
  padding: 4px;
}

.main-nav li a:hover,
.main-nav li a:active {
  border-top: 2px solid #b36500;
  border-bottom: 2px solid #b36500;
  -webkit-transition: border-bottom 0.2s;
  -o-transition: border-bottom 0.2s;
  transition: border-bottom 0.2s;
}

@media (min-width: 601px) {
  .mobile-menu {
    display: none;
  }
}

.desktop-menu {
  display: none;
  right: 0;
  top: 0;
}

@media (min-width: 601px) {
  .desktop-menu {
    display: block;
    position: absolute;
    margin-top: 30px;
    margin-right: 10px;
  }
  .nav-row {
    margin-right: 20px;
  }
  .nav-row a {
    margin-left: 20px;
  }
}

@media (min-width: 901px) {
  .desktop-menu {
    margin-top: 50px;
    margin-right: 10px;
  }
}

@media (min-width: 1290px) {
  .desktop-menu {
    margin-top: 70px;
    margin-right: 10px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />

<nav>
  <div class="nav-row">
    <div>
      <a href="index.html">
        <img src="http://placekitten.com/301/301" alt="Archer Civils & Construction Logo" class="logo" />
      </a>
    </div>
    <div class="mobile-menu">
      <div id="nav-links">
        <a href="pages/civils.html">Civils</a>
        <a href="pages/fencing.html" class="nav-mid">Fencing</a>
        <a href="pages/contact.html" class="nav-mid">Contact</a>
      </div>
      <a href="javascript:void(0);" class="icon hamburger-icon" onclick="navHamburger()">
        <i class="fa fa-bars"></i>
      </a>
    </div>
    <div class="desktop-menu">
      <ul class="main-nav">
        <li><a href="pages/civils.html">Civils</a></li>
        <li><a href="pages/fencing.html" class="nav-mid">Fencing</a></li>
        <li><a href="pages/contact.html" class="nav-mid">Contact </a></li>
      </ul>
    </div>
  </div>
</nav>

Upvotes: 1

Mayank saini
Mayank saini

Reputation: 105

Just insert tour image tag inside the anchor tag like this: Text

Upvotes: 0

Related Questions