Reputation: 2563
I have a bootstrap container like below.
in one col-xs-6
, I have my logo and in other col-xs-6
, I have cart icon and my toggle menu.
When I resize my browser window, I want to have my logo to have fixed position, but I want to move my cart icon and my navigation together.
<div class="header-wrapper">
<div class="container">
<div class="row">
<div class="col-xs-6">
<a href="#" class="logo"><img src="assets/logo.png" alt=""></a>
</div>
<div class="col-xs-6">
<a href="" class="cart"><span>1</span><i class="fa fa-shopping-cart"></i></a>
<a href="#" class="menu-toggle">Menu <i class="fa fa-bars"></i></a>
</div>
</div>
</div>
</div>
Here's the fiddle for the same. for some reason, It is not coming in the same line of logo as well.
Please help.
Upvotes: 0
Views: 57
Reputation: 1221
Instead of your code structure you can write,
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" class="logo"><img src="assets/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class=""><a href="#">1</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div>
</div>
</div>
in this case menu will collapse in small screen.
Upvotes: 1
Reputation: 270
You need to overwrite your .menu-toggle class to {display:inline-block;}
Upvotes: 1