I am facing an issue with the display of my two logos. One logo is supposed to be in the right corner and the other in the left, but the right logo is not appearing correctly.
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="./" class="navbar-brand"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li id="home">
<a href="./index.php">Home</a>
</li>
<li id="bands">
<a href="./bands.php">Bands</a>
</li>
<li id="jeugdhuizen">
<a href="./jeugdhuizen.php">Jeugdhuizen</a>
</li>
<li>
<a href="./phpBB3/index.php" target="_blank">Forum</a>
</li>
<li id="over">
<a href="./over.php">Over Bandbook</a>
</li>
<li id="registreer">
<a href="./signup.php">Registreer</a>
</li>
<li>
<form class="navbar-form navbar-right" id="loginoutform" role="form" action="./verwerklogin.php" method="post">
<div class="form-group" id="usernamediv">
<label class="sr-only" for="username">Username: </label>
<input type="text" id="username" name="username" placeholder="Username" class="form-control">
</div>
<div class="form-group" id="passworddiv">
<label class="sr-only" for="password">Password: </label>
<input type="password" id="password" name="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success" id="signin">Sign in</button>
</form>
</li>
</ul>
</nav><!-- /.navbar-collapse -->
<a href="./" class="navbar-brand pull-right"><img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50"></a>
</div><!-- /.container -->
This is the CSS code that I am using:
.navbar-inverse { background-color: white;}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #B84E1A}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #912C13}
.navbar-inverse .navbar-brand { color: white; font: 42px playbill, onyx, fantasy; text-align: center; padding-top:0px;}
.navbar-inverse .navbar-brand:hover { color: #B84E1A}
.navbar-inverse .navbar-nav>li>a { color: #999999}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
body
{
padding-top: 50px;
background-color:#000000;
}