Logo link in Responsive CSS Navbar not working

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">
                <a href="/pages/Nav1" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav1</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#menu1">Menu1</a>
                  </li>
             
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav2" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav2</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="/pages/menu2">menu2</a>
                  </li>
             
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav3" class="dropdown-toggle" data-toggle="dropdown" role="button">Nav3</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#nav3">menu3</a>
                  </li>
               
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav4" class="dropdown-toggle" data-toggle="dropdown" role="button">nav4</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#menu4">Menu4</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav5" class="dropdown-toggle" data-toggle="dropdown" role="button">nav5</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#menu5">menu5</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav6" class="dropdown-toggle" data-toggle="dropdown" role="button">nav6</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#menu6">menu6</a>
                  </li>
                
                </ul>
              </li>
              <li class="dropdown">
                <a href="/pages/nav7" class="dropdown-toggle" data-toggle="dropdown" role="button">nav7</a>
                <ul class="dropdown-menu">
                  <li>
                    <a href="#menu7">Menu7</a>
                  </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;
  }