CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Suraj
Suraj

Reputation: 2563

on window resize responsive header

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

Answers (2)

Anil Kumar Ram
Anil Kumar Ram

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

Som
Som

Reputation: 270

You need to overwrite your .menu-toggle class to {display:inline-block;}

Upvotes: 1

Related Questions