Logo link in Responsive CSS Navbar not working - css

Question

I am new to CSS and trying to enable a responsive centered/navbar menu to my page with a logo positioned to left of navigation menu. Everything visually and functionally appears OK however the image logo link is not working (will not hyperlink) and I cannot figure out why. Any help or guidance to what I might be missing? Thanks so much in advancce. Here is my HTML/CSS.
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="https://www.mytestorganization.com">
<img src="/logo/content/items/925f35a5b1cb48379a2e2c416b4f03e4/data"
width="120" alt="myOrgLogo" />
</a>
<!-- This is optional and can be removed. -->
<div class="container-fluid">
<!-- This is what generates your burger menu icon on mobile -->
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> </button>
</div>
<!-- This is what gets hidden behind the burger menu icon -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Nav1
<ul class="dropdown-menu">
<li>
Menu1
</li>
</ul>
</li>
<li class="dropdown">
Nav2
<ul class="dropdown-menu">
<li>
menu2
</li>
</ul>
</li>
<li class="dropdown">
Nav3
<ul class="dropdown-menu">
<li>
menu3
</li>
</ul>
</li>
<li class="dropdown">
nav4
<ul class="dropdown-menu">
<li>
Menu4
</li>
</ul>
</li>
<li class="dropdown">
nav5
<ul class="dropdown-menu">
<li>
menu5
</li>
</ul>
</li>
<li class="dropdown">
nav6
<ul class="dropdown-menu">
<li>
menu6
</li>
</ul>
</li>
<li class="dropdown">
nav7
<ul class="dropdown-menu">
<li>
Menu7
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container-fluid -->
</nav>
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
}
.navbar{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.navbar-nav {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
z-index: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
#media screen and (max-width: 768px) {
.header-container .navbar-header {
width: 100%;
}
.navbar-default .navbar-toggle {
margin-top: 18px;
}
.navbar .container-fluid {
display: block !important;
}
.navbar.navbar-default .navbar-collapse.collapse {
overflow: hidden;
display: none !important;
}
.navbar.navbar-default .navbar-collapse.collapse.in {
display: block !important;
}
.navbar.navbar-default .navbar-nav {
display: inherit;
padding: 0 0 1rem 0;
}
.navbar.navbar-default .navbar-nav > li {
display: block;
}
}

Answer 1

the link in href="https://www.mytestorganization.com" is not working. There is no webpage with this url. But if you are looking for a cursor change when you hover over your logo or click on logo image then you can apply this style.
.navbar-brand {
float: left;
padding:0;
padding-left: 0px;
cursor:pointer;
}
.navbar-brand:hover{
cursor:pointer;
}