Customizing Navbar

I'm trying to design my navbar for my site, to be used in desktop and mobile mode. I've created a JS Fiddle here This the html so far:

Solution 1:

You could try adding push / pull as shown here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_grid_ex9&stacked=h That is one option. On your top row you can achieve the result a couple ways, one is to use offfset as shown below. The example uses the medium size, you will need to change it for your particular layout.

<div class="row row-fluid"> // row to be inside of a container<divclass="col-md-2">
Your burger-menu here
</div><divclass="col-md-2 offset-md-8">
Your burger-menu here
</div>
</div>

Then start a new row for the login search dropdown but still in the same conatiner

<divclass="row row-fluid"><divclass="col-md-2">
login code
</div><divclass="col-md-8">
search code
</div><divclass="col-md-2">
dropdown code
</div></div>

Obviously, as you would in Bootstrap 3, you need to set the columns to work for all different sizes. If the above does not work with your layout then try the push and pull methods to use your current configuration to move the divs into place.

Share

You may like these posts

• 
  Using Css Grid Why Im Getting This Gap?
• 
  Keeping Background Image At Bottom
• 
  How To Edit 'clip' Css Property In Jquery?
• 
  Create A Div With Text And Image Scaled To Fit Remaining Space?