Adding link to logo adds link to whole navbar - html

Question

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.
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">
Civils
Fencing
Contact
</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>Civils</li>
<li>Fencing</li>
<li>Contact </li>
</ul>
</div>
</div>
</nav>

Answer 1

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">
Civils
Fencing
Contact
</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>Civils</li>
<li>Fencing</li>
<li>Contact </li>
</ul>
</div>
</div>
</nav>

Answer 2

"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:
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>

Answer 3

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