Ravi K Chowdary Ravi K Chowdary - 2 months ago 12
CSS Question

Display Tow logos , one in right side and one in left side and in between navbar + bootstrap

I have two logo's. One should be in the right corner and one should be in the left corner. But right logo is not displaying in the proper way.

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




CSS is :-

.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;
}

Answer

umm.. like @Mrd05d said this seems to work

</ul>
<a href="./" class="navbar-brand pull-right">
<img src="applicatie/img/menu_icon.gif" class="img-responsive" alt="BB" height="50" width="50">
</a>
</nav><!-- /.navbar-collapse --> 

This will get the image all the way to the right but since its inside container it will still have some padding on the right side.

If you want it to be all the way to the top right (not aligned with menu at all) you can give it absolute positioning.

.logo-right{
position:absolute;
top:0;
right:0;
}
Comments