Bootstrap dropdown menu width with right-aligned glyphicons - html

I have a dropdown menu from the navbar and it has right-aligned (css class pull-right) glyphicons. One of the menu items is a bit longer than the others and it runs into the glyphicon, causing it to be moved down a half-line:
I can obviously set the width of this dropdown manually with a CSS class and a hardcoded width, but I'd rather get Bootstrap to incorporate the glyphicon width appropriately. How do I need to structure my HTML or what changes to CSS do I need to make to make this work?
Here's the HTML for the entire navbar:
<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="/">
<span>
<img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"></span>
Home
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>
XXX
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin<span class="caret"></span>
<ul class="dropdown-menu">
<li>Manage Roles</li>
<li>Manage Groups</li>
<li>Manage Users</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> Administrator<span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings <span class="glyphicon glyphicon-wrench pull-right"></span></li>
<li>Change Password <span class="glyphicon glyphicon-lock pull-right"></span></li>
<li role="separator" class="divider"></li>
<li>Logout <span class="glyphicon glyphicon-log-out pull-right"></span></li>
</ul>
</li>
</ul>
</div>
</div>
And here's any CSS that could possible modify this page:
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.glyphicon-hover {
border-radius: 25px;
border: 1px solid transparent;
padding: 2px;
}
.glyphicon-hover:hover, .glyphicon:focus {
border-radius: 5px;
border: 1px solid black;
color: red;
}
I'm using jquery-ui.css (version 1.11.4 via jQuery.UI.Combined in Nuget) and bootstrap.css (version 3.3.6.1 via Nuget).

Rearranging your markup to place the icon before the anchor text (this will circumvent the "step-down" effect), then wrapping the anchor text in another nested tag that you can target to apply further styling will help in resolving the issue at hand.
HTML
<ul class="dropdown-menu ">
<li><span class="glyphicon glyphicon-wrench pull-right "></span><span class="dropdown-link-text ">Settings</span>
</li>
<li><span class="glyphicon glyphicon-lock pull-right "></span><span class="dropdown-link-text ">Change Password</span>
</li>
<li role="separator " class="divider "></li>
<li><span class="glyphicon glyphicon-log-out pull-right "></span><span class="dropdown-link-text ">Logout</span>
</li>
</ul>
CSS
.dropdown-link-text {
display: inline-block;
margin-right: 20px;
}
Working example: http://www.bootply.com/wMD9IaHs4R
Alternatively, you could also try adding the icons in as pseudo elements of the link tag itself, then position them absolute and adjust the top, right values accordingly.

I've used this CSS instead of the .pull-right class:
#media (min-width: 768px) {
.navbar-right .dropdown-menu > li > a {
padding-right: 46px;
position: relative;
}
.navbar-right .dropdown-menu > li > a > .glyphicon {
display: block;
position: absolute;
right: 20px;
top: 5px;
}
}
Please check the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
.glyphicon-hover {
border-radius: 25px;
border: 1px solid transparent;
padding: 2px;
}
.glyphicon-hover:hover, .glyphicon:focus {
border-radius: 5px;
border: 1px solid black;
color: red;
}
#media (min-width: 768px) {
.navbar-right .dropdown-menu > li > a {
padding-right: 46px;
position: relative;
}
.navbar-right .dropdown-menu > li > a > .glyphicon {
display: block;
position: absolute;
right: 20px;
top: 5px;
}
}
<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="/">
<span>
<img id="XXX-brand-logo" alt="Brand" src="/Content/Images/XXX.png" width="20" height="20"></span>
Home
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>
XXX
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
<li class="dropdown">
XXX<span class="caret"></span>
<ul class="dropdown-menu">
<li>XXX</li>
<li>XXX</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Admin<span class="caret"></span>
<ul class="dropdown-menu">
<li>Manage Roles</li>
<li>Manage Groups</li>
<li>Manage Users</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> Administrator<span class="caret"></span>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-wrench"></span>Settings</li>
<li><span class="glyphicon glyphicon-lock"></span>Change Password</li>
<li role="separator" class="divider"></li>
<li><span class="glyphicon glyphicon-log-out"></span>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

The simplest solution is to line break the text
Change<br>Password
This leaves all elements and the menu the same size horizontally. The second simple solution is to change the width
.glyphicon {
padding-left: 10px;
}

Related

Bootstrap multi level menu issues on mobile

My problem is, that when i am looking at the site on mobile, i cant see the submenus.
For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.
<ul class="nav nav-justified">
<li>Alaplap<b class="caret"></b>
<ul class="dropdown-menu">
<li class="dropdown-submenu">Intel alaplap
<ul class="dropdown-menu">
<li class="dropdown-submenu">Asus alaplap
<ul class="dropdown-menu">
<li>Asus Z370 alaplap</li>
<li class="dropdown-submenu">Asus Z390 Express alaplap
<ul class="dropdown-menu">
<li>aaaaa</li>
<li>bbbb</li>
</ul>
</li>
</ul>
</li>
<li>MSI alaplap</li>
<li>Gigabyte alaplap</li>
</ul>
</li>
<li>AMD alaplap</li>
</ul>
</li>
<li>SSD meghajtó</li>
<li>Videókártya</li>
<li>Memória</li>
<li>Tápegység</li>
<li>Merevlemez</li>
<li>Monitor</li>
<li>Telefontok<b class="caret"></b>
<ul class="dropdown-menu">
<li>Samsung telefontok</li>
</ul>
</li>
</ul>
You can take a look at my demo site at here: My demo site
This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
}
and here is the actual html to power your menu...feel free to change the css accordingly.
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 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">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</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 class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Link</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Link 1</a></li>
<li>Lik 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link</li>
<li>Link</li>
</ul>
</li> <!-- .dropdown -->
</ul> <!-- .nav .navbar-nav -->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Codepen solution to see it working

How to put all the three portions in same line when reducing the screen size?

I am new to coding as well as stack overflow and below mentioned is the code, and I am trying to bring both the icons in the same line as the brand logo and menu when reducing the size of screen.
Below mentioned is the code.
<nav class="navbar navbar-default navbar-justified">
<div class="container">
<!-- 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>
<a class="navbar-brand logo" href="#"><img src="images/zigsaw.png" class="img-responsive" alt="logo"></a>
</div>
<div class="nav navbar-nav navbar-center navbar-header">
<ul class="list-inline">
<li><i class="fa fa-bell fa-2x" aria-hidden="true"></i></li>
<li><i class="fa fa-comment fa-2x " aria-hidden="true"></i></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.badgeq {
display: flex;
min-width: 10px;
padding: 3px 7px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #35BBE6;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: transparent;
border-radius: 10px;
}
.badge:after {
content: "100";
position: relative;
background: rgba(0,0,255,1);
height: 2rem;
top: 0rem;
right: 0.5rem;
width: 2rem;
text-align: -webkit-center;
line-height: 2rem;
font-size: 1rem;
border-radius: 50%;
color: white;
border: 1px solid blue;
}
#media (min-width: 768px) {
.navbar-nav.navbar-center {
position: absolute;
left: 45%;
transform: translatex(-50%);
margin-top: 10px;
}
}
Flexbox defines how flex items are laid out inside a flex container. Flex items are positioned inside a flex container along a flex line. By default there is only one flex line per flex container. So, you can try the bellow structure:
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>

Bootstrap navbar is not responsive

I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<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>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<!-- 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>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</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 navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>

How to move a navbar with Bootstrap?

I have two navbar containers on my page.
Originally, navbar1 stays on top of navbar2, but after I shrink the page and the responsive style come to have effect, I need navbar2 to be on top of nabvar1
Here's a link to my demo: click
Here's an example of what I have:
Here's an example of what I need:
Update
CSS Code Snippet
.navbar
{
margin-bottom: 3px;
}
.btn-group
{
float: right;
}
/*****************************************************/
/*************** LEFT NAV CUSTOM STYLES **************/
/*****************************************************/
.navbar-inner-left
{
padding-right: 0;
padding-left: 0;
}
.navbar-left{}
.navbar-left .nav > li
{
float: none;
}
.navbar-inner-left div > .nav-list
{
padding-left: 0;
}
.navbar-inner-left .container-fluid > .brand
{
padding: 10px 5px 10px 5px;
}
.navbar-inner-left
{
border: none;
background-color: #ffffff;
background-image: -moz-linear-gradient(top,#ffffff,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#ffffff));
background-image: -webkit-linear-gradient(top,#ffffff,#ffffff);
background-image: -o-linear-gradient(top,#ffffff,#ffffff);
background-image: linear-gradient(to bottom,#ffffff,#ffffff);
border: none;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffffffff',GradientType=0);
-webkit-box-shadow: 0;
-moz-box-shadow: 0;
box-shadow: 0;
}
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
/************************************************* RESPONSIVE STUFFF**************************************************************/
#media (min-width: 1200px){}
#media (min-width: 980px){}
#media (max-width: 979px){}
#media (max-width: 767px){}
#media (min-width: 768px) and (max-width: 979px)
{
.navbar-left .btn-navbar
{
margin-right: -15px;
}
.navbar-inner-left .container-fluid > .brand
{
float: left;
}
}
#media (max-width: 767px) and (min-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
#media (max-width: 480px)
{
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a
{
padding-left: 30px;
}
.navbar-inner-left .container-fluid > .brand
{
padding-left: 30px;
}
.navbar-inner-left .nav-list > .nav-header
{
padding-left: 20px;
}
.navbar-left .btn-navbar
{
margin-right: 26px;
}
}
HTML Code Snippet
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<img alt="140x140" src="http://lorempixel.com/140/140/" />
<div class="navbar navbar-left">
<div class="navbar-inner navbar-inner-left">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Main Menu
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-list">
<li class="nav-header">List header </li>
<li>Home </li>
<li>Library </li>
<li>Applications </li>
<li class="nav-header">Another list header </li>
<li>Profile </li>
<li>Settings </li>
<li class="divider"></li>
<li>Help </li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="span10">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar">
</span></a>Title
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li class="nav-header">Nav header </li>
<li>Separated link </li>
<li>One more separated link </li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li>Link </li>
<li class="divider-vertical"></li>
<li class="dropdown"><a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong
class="caret"></strong></a>
<ul class="dropdown-menu">
<li>Action </li>
<li>Another action </li>
<li>Something else here </li>
<li class="divider"></li>
<li>Separated link </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="btn-group">
<button class="btn" type="button">
<em class="icon-align-left"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-center"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-right"></em>
</button>
<button class="btn" type="button">
<em class="icon-align-justify"></em>
</button>
</div>
</div>
</div>
</div>
Thanks in Advance!
.navbar-left {
position: relative;
top: 88px;
}
.navbar-inner {
position: relative;
top: -44px;
}
And put that in the media query block you want to swap them in.
Having looked at your code i would use jQuery. I'm on a mobile device and can not access your jsfiddle at the moment. But to move a div from one place to another you would just do this in jQuery
$("#source")
.appendTo("#destination");
EDITED
if ( $(window).width() < 959) {
$("#source")
.appendTo("#destination");
}

twitter bootstrap IE9, nav collapse not pushing rest of content down

Im not sure is this an issue with the content below it, or nav-collapse itself, But the only way I can seem to replicate the issue in firefox is by changing float:left to float:none in the code below. Basically when I toggle the menu the content below it doesnt get pushed down in IE9
.navbar .navbar-inner .nav-collapse.collapse
{
background: #6E2E8F;
border-radius: 5px 5px 5px 5px;
float: left;
height: 0px;
margin-bottom: 15px;
padding: 0;
width: 100%;
}
.navbar {overflow: visible;}
Here is the outputted html...
<div class="navbar">
<div class="navbar-inner">
<a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone"> Categories</a>
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>***CONTENT***</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span>Start Shopping
</span><span class="active_downarrow"></span></a>
<span class="sub-menu-response">
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
<ul class="dropdown-menu" > ***CONTENT*** </ul>
</span>
</li>
<li> ***CONTENT*** </li>
<li> ***CONTENT*** </li>
<li>***CONTENT*** </li>
</ul>
</div>
</div>
</div>
Here is the link to the site... http://bc_mobile.hailstormcommerce.com/
You can try adding this css class:
.nav-collapse.collapse.in {
height: auto !important;
}
Because when you drop-down the navigation, bootstrap gives it an initial width fixed.