In my bootstrap 3 navbar, the elements other than the brand which is on the left are floated to the right using the "pull-right" bootstrap class. In the mobile version, when they are dropped down with the toggle button, they remain floated to the right which looks very ugly. How can I change it so they are either floated left or centered when in the mobile view? Thanks in advance for any help
<div class="container" id="main">
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" ><img src="images/logo.png" alt="logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse navbar-right">
<ul class="nav navbar-nav">
<li> Our Mission<li>
<li> What We Do <li>
<li> About Us<li>
</ul> <!-- end nav ul -->
</div> <!-- end nav collapse -->
</div><!-- end nav container -->
</div><!-- end navbar -->
Did you try to define the button as a pull-left instead of pull-right? Maybe that suits to you.
instade of using pull-right ..use navbar-right and lets see if it works.. it should work ;)
Update:
Use this
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li> Our Mission<li>
<li> What We Do <li>
<li> About Us<li>
</ul> <!-- end nav ul -->
</div>
Related
The following code produces "pills" of unequal width when displayed on small or extra small screens (as defined by twitter bootstrap by default).
<header>
<div id="brand" class="container">
<div class="row">
<div class="col-sm-12">
<h1>Website</h1>
<h2>header</h2>
</div>
</div>
</div>
<div id="navbar" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navs">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navs" class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified">
<li class="active">
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</header>
The first pill seems to be exactly 2 pixels wider than the rest. I would prefer that the pills fill the entire width of the display.
Is this a bug in Bootstrap, or something I can remedy via some simple CSS?
JSFiddle: https://jsfiddle.net/elikmiller/z2og3vq7/
why don't you override bootstrap css with your custom css just add your custom class for example nav-custom and put this css into your custom css file
.nav-custom>li>a {
padding: 10px 10px;
}
fiddle
You should use another class in your html called nav-stacked. I updated your Fiddle you can see here the full example and can see here the relevant HTML part.
<ul class="nav nav-pills nav-stacked nav-justified">
<li class="active">
This one is 2px wider
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
When I click on the hamburger menu in my nicely collapsed bootstrap navbar on my phone, the layout slides to the side as expected, but shows me an empty white (or whatever body background colour I have) bar instead of the navigation. Closer inspection with firebug showed that upon clicking the button, some classes got changed on the navbar-collapsebut it remains tagged as invisible.
I have recompiled Bootstrap from LESS to change the point at which it collapses, but the issue seems persistent even with 'vanilla' bootstrap.
Code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" style="padding-right: 0px; min-width: 50px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<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 hidden-xs hidden-sm" href="index.html"><span class="glyphicon glyphicon-home" style="padding-right: 0px;"></span></a><a class="navbar-brand hidden-lg hidden-md" href="index.html">De Fijnkost</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigation-example-2">
<ul class="nav navbar-nav navbar-right">
<li>
Fijne Vleeswaren
</li>
<li>
Bereide Gerechten
</li>
<li>
Eigen salades
</li>
<li>
Kazen & Kaasschotels
</li>
<li>
Belegde Broodjes
</li>
<li>
Contact
</li>
<li>
Nieuws
</li>
<li class="dropdown">
<a class="dropdown-toggle btn btn-white btn-fill" data-toggle="dropdown" href="#">Bestel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Kaasschotel
</li>
<li class="disabled">
Broodjes
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid-->
</nav>
Same thing happens on pages without the transparent or navbar-fixed-top class. transparent is added by my CSS. Page is visible on defijnkost.be
Your .navbar-collapse is set to display: none !important as far as I can see.
If you set it to display: block in your mobile view media query it should show up just fine.
The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.
This is what it looks like:
As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.
Here is the HTML for the navbar:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="index.html"><img src="img/EPG.jpg"></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">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?
Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:
.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
top:30px;
}
Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.
Here's what I have, I've tried moving around my section inside the "brand" and do a pull-right, outside the brand and outside the collapse and do a pull-left/right, while also trying to place it before or after the collapse section.
When adding it to the brand section it works, but it goes down to a new line. How do I keep it on the same line?
<body>
<header>
<nav class="navbar navbar-default navbar-inverse" role="navigation" style="font-size: 18px">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand site-title" style="text-decoration: none; font-size: 24px; font-weight:bold">#Html.ActionLink("Manager", "Index", "Player")</div>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
#* <li class="active">#Html.ActionLink("Home", "Index", "Player")</li>
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li> <li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>#Html.ActionLink("Change Password", "ManagePassword", "Account")</li>
<li>#Html.ActionLink("Update Profile Info", "UpdateProfile", "Account")</li>
<li>#Html.ActionLink("Log Off", "LogOff", "Account")</li>
</ul>
</li>
</ul>
</div>
<div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-right">
<ul class="nav navbar-nav">
<li class="active">#Html.ActionLink("Match", "Index", "Match")</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
Fiddle with clearfix and expanded options on left side like normal: http://jsfiddle.net/jgoemat/u1j8o0n3/1/
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- The Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News
</li>
<li>Shop
</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
You should be able to use pull-left and pull-right in 2 nav-header's to prevent the link from collapsing.
See: http://bootply.com/104747
<nav class="navbar navbar-default navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header pull-left">
<div class="navbar-brand">Brand</div>
</div>
<!-- I don't want it apart of the collapsible portion -->
<div class="navbar-header pull-right">
<ul class="nav navbar-nav pull-left">
<li class="active">No Collapse </li>
</ul>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
Profile <b class="caret"></b>
<ul class="dropdown-menu">
<li>Change Password</li>
<li>Update Profile Info</li>
<li>Log Off</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Here is my other answer in Jade with some template logic just for fun :). See the other answer for additional info.
//- NOTE: 'navbar-default' styles the 'burger' and navbar text color, so remove it to add your own
nav(class="navbar navbar-default navbar-fixed-top", role="navigation")
.container
//- Title
.navbar-header.pull-left
a.navbar-brand(href='javascript:window.location.replace(window.location.origin);') GNOMIS
//- 'Sticky' (non-collapsing) right-side menu item(s)
.navbar-header.pull-right
ul.nav.pull-left
//- This works well for static text, maybe some initials
li.navbar-text.pull-left User Name
//- User Icon drop-down menu
li.dropdown.pull-right
a.dropdown-toggle(href='#', data-toggle='dropdown', style="color:#777; margin-top: 5px;")
span.glyphicon.glyphicon-user
b.caret
ul.dropdown-menu
li
a(href="/users/id", title="Profile")
| Profile
li
a(href="/logout", title="Logout")
| Logout
//- Required bootstrap placeholder for the collapsed menu
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
//- The Collapsing items navbar-left or navbar-right
.collapse.navbar-collapse.navbar-left
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/news") News
li
a(href="/shop") Shop
//- Additional navbar items
.collapse.navbar-collapse.navbar-right
//- pull-right keeps the drop-down in line
ul.nav.navbar-nav.pull-right
li
a(href="/locator") Locator
li
a(href="/extras") Extras
Here is the code for navbar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="index.html">EasyUniv</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>Services</li>
<li>Campus</li>
<li>Advertise</li>
</ul>
</div>
</div>
</div>
</div>
The example is at: www.easyuniv.com/staging
when you make the screen smaller it hides the nav buttons correctly but they do not go into the little drop down like it should. also at certain widths there is weird padding.. been trying different things and can't get these to work.
Thanks
You need to include jQuery before bootstrap.