Bootstrap navbar brand link is not working - html

Question

I have a navbar where I show different logos depending on the size of the screen. This is how the html for it looks like:
#media (max-width: 767px) {
.logo-big {
display: block;
}
.logo-small {
display: none;
}
}
The full css is here:
.header {
background-image: url('/img/goal-cover.jpeg');
}
.navbar .navbar-nav > li > a {
color: inherit;
padding-top: 0;
padding-bottom: 0;
font-weight: 400;
font-size: 12px;
border-radius: 3px;
line-height: 58px;
}
b, strong {
font-weight: bold;
color: white;
}
#search {
text-align:center;
text-align: center;
line-height: 57px;
font-size: 16px;
}
input {
width: 200px;
padding: 0 20px;
}
input,
input::-webkit-input-placeholder {
font-size: 16px;
letter-spacing: 0.5px;
border: 0;
background-color: #fff;
color: #3c3e42!important;
}
.btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover, .open > .btn.btn-primary.dropdown-toggle, .open > .btn.btn-primary.dropdown-toggle:focus, .open > .btn.btn-primary.dropdown-toggle:hover, .navbar .navbar-nav > li > a.btn.btn-primary, .navbar .navbar-nav > li > a.btn.btn-primary:hover, .navbar .navbar-nav > li > a.btn.btn-primary:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active, .navbar .navbar-nav > li > a.btn.btn-primary.active, .navbar .navbar-nav > li > a.btn.btn-primary:active:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active:hover, .navbar .navbar-nav > li > a.btn.btn-primary.active:focus, .navbar .navbar-nav > li > a.btn.btn-primary.active:hover, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:focus, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:hover {
background-color: #00bcd4;
color: #FFFFFF;
}
.btn-full-width {
width: 100%;
}
.card {
display: inline-block;
position: relative;
width: 100%;
border-radius: 3px;
background: rgba(41, 39, 39, 0.9);
color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card-signup .content {
padding: 0px 30px 0px 30px;
}
.big-logo-circle {
margin: auto;
width: 180px;
height: 180px;
margin-top: 50px;
padding: 20px 0;
border-radius: 50%;
background: rgba(41, 39, 39, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.signup-page .wrapper .card-signup {
margin: 50px 0 40px;
}
.btn-red {
background: #e90052;
width: 100%;
}
.btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red a:active{
background: rgba(233, 0, 82, 0.8)!important;
}
.btn-blue {
background: #096b7d;
width: 100%;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue a:active{
background: rgba(9, 107, 125, 0.8)!important;
}
body {
background-color: #ddd;
}
.navbar-toggle .icon-bar {
background-color: #333;
}
.navbar-nav > li {
line-height: 50px;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
.logo, .navbar-nav > li > .btn {
margin: 0 15px;
height: 41px;
margin-top: 4px;
box-shadow: none;
color: #fff;
}
.logo {
background: transparent;
height: 32px;
margin-top: 5px;
}
.navbar-nav > li > .btn {
background: rgba(0, 188, 212);
display: flex;
align-items: center;
margin-top: 8px!important;
box-shadow: none!important;
width: 100px;
}
.navbar-nav > li > .btn:hover, .navbar-nav > li > .btn:focus, .navbar-nav > li > .btn:active {
box-shadow: none!important;
background: rgba(0, 188, 212, 0.8)!important;
}
.logo-big {
display: none;
}
#media (min-width: 767px) {
.navbar-search-form {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100%;
float: none;
text-align: center;
padding: 8px 0;
}
.logo {
margin-left: 0;
}
}
#media (max-width: 767px) {
.navbar-search-form {
padding-left: 0;
padding-right: 0;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 400px;
}
.logo-big {
display: block;
}
.logo-small {
display: none;
}
}
#media (max-width: 500px) {
.navbar-search-form {
padding-left: 0;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 300px!important;
}
}
.navbar .navbar-form .form-group {
margin: 0;
padding: 0;
height: 39px;
border: 1px solid;
border-radius: 3px;
line-height: 39px;
background-color: #fff;
}
.navbar .navbar-form {
margin: 0;
}
.navbar-header {
margin-top: 6px;
}
.navbar-form .input-group {
float: left;
}
.input-group .input-group-addon {
padding: 6px 12px;
color: #00bcd4;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 400px;
background-image: none;
}
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logo-small" href="{{ url('/') }}">
<img class="logo" src="{{ asset('/img/logo-small.png') }}" alt="logo">
</a>
<a class="navbar-brand logo-big" href="{{ url('/') }}">
<img class="logo" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search for videos or players..." autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Sign in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
And I am changing the logos like this in the css as you can see in code snippet.
But the link for the small brand logo is not working, I can't click on it, when I resize the screen to smaller size and get the bigger logo, then I can click on it and it works. Not sure how to fix that, why can't I click on the small logo on bigger screens?

Answer 1

Set your .navbar-header relative and above with z-index.
.navbar-header {
position: relative;
z-index:1;
}
Working Fiddle

Answer 2

I don't really see anything wrong with your code, but why not use bootstrap default classes?
<img src="logo-small.jpg">
<img src="logo-big.jpg">

Answer 3

The problem is your form, you set width of your form to 100% and it is covering your logo on larger screens.
#media (min-width: 767px) {
.navbar-search-form {
width: 300px;
}
}
.navbar .navbar-form {
margin: auto;
}
Change it to for example 300px, add margin auto and see what happens.

Answer 4

Try this as follow:
.logo-big {
float:left
}