Making a responsive bootstrap nav (problems with alignment)

Question

I've created a nav using bootstrap but it's not responding the way i'd like it to. I want it to align with the first image in the photo menu (opens when you click the camera icon), I want it to align with it at all screen sizes. I've tried playing around with margins but i'm not sure if this is the best way, it didn't scale down very nicely.

website: http://explorecanterbury.co.uk/#

Thanks

Answer 1

You have a .container wrapping your .container-fluid . That defeats the purpose of the fluid container. Remove the innermost fluid container and replace the outermost container with a fluid container. You can see the difference in the two snippets below.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <!-- ↓ this should be container-fluid ↓ --> <div class="container"> <nav class="navbar navbar-default" style="z-index:2;"> <!-- ↓ this shouldn't be here at all ↓ --> <div class="container-fluid" style="padding-left: 5px;"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li> <ul class="dropdown-menu"> <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;Museums and Galleries</a></li> <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;Landmarks</a></li> <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;Shopping</a></li> <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;Churches</a></li> <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;Tours and Guides</a></li> </ul> <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li> <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li> <li><span class="searchIcon hidden-xs"></span></li> </ul> <form class="navbar-form hidden-xs" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> </div> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <div class="container-fluid"> <nav class="navbar navbar-default" style="z-index:2;"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li type="button" class="btn btn-default dropdown-toggle hidden-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="LocIcon"></span></li> <ul class="dropdown-menu"> <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox">&nbsp;Museums and Galleries</a></li> <li><a href="#" class="small" data-value="option3" tabindex="-1"><input type="checkbox">&nbsp;Landmarks</a></li> <li><a href="#" class="small" data-value="option4" tabindex="-1"><input type="checkbox">&nbsp;Shopping</a></li> <li><a href="#" class="small" data-value="option5" tabindex="-1"><input type="checkbox">&nbsp;Churches</a></li> <li><a href="#" class="small" data-value="option6" tabindex="-1"><input type="checkbox">&nbsp;Tours and Guides</a></li> </ul> <li><span class="photosIcon nav-toggle-2 hidden-xs"></span></li> <li><span class="infoIcon nav-toggle-3 hidden-xs"></span></li> <li><span class="searchIcon hidden-xs"></span></li> </ul> <form class="navbar-form hidden-xs" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> </div> </form> </div><!-- /.navbar-collapse --> </nav> </div> 

Answer 2

The key to having a responsive elements is not have a specific width or least set the specific width to a certain break points.

Both .photo-menu and .nav-bar has a fixed width. You can set .photo-menu to have width: auto and play with position : relative. And .nav-bar max-width : 415px.

It's also helpful if you utilize the column classes that bootstrap has. (col-lg-x, col-md-x, col-sm-x, col-xs-x). Learn morea about it here : http://getbootstrap.com/css/#grid

Hope that helps!