Using bootstrap navbar i am not able to make the menu items in collapsed mode become 100%. For some reason there is a margin on one side of the menu items.
Fiddle: http://jsfiddle.net/yudcbv7n/
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand navbar-header-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav nav-justified">
<a class="navbar-brand navbar-brand-collapsed" href="#"><i class="fa fa-bus"></i> Project name</a>
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
And some CSS:
#media (min-width: 767px) {
.navbar-nav.nav-justified > li{
float:none;
}
.navbar-header-brand-collapsed {
display:none;
}
}
#media (max-width: 767px) {
.navbar-header-brand-collapsed {
display:block;
}
.navbar-brand-collapsed {
display:none;
}
}
The culprit seems to be the .nav-justified class. It seems that it is (confusingly) not meant for use with the navigation bar (.navbar).
If you look at the Bootstrap documentation, it mentions how to use .nav-justified with the class .nav using tabs and pills, but not with .navbar.
I would suggest that you remove the .nav-justified class. That will get your collapsed menu items to take up the full width.
Try this:
FIDDLE DEMO
BOOTPLY DEMO
Use text-center instead of nav-justified
<ul class="nav navbar-nav text-center">
Related
Bootstrap newbie question. I am using a variation of ZimSystem's Left-Center-Right Aligned NavBars. I put my Brand on the left.
There are two seemingly related problems.
1) On large screens the fb-like button hangs off the right-hand side of the page.
2) On small screens, the Brand is moved down a couple lines so that the first menu item is concealed by it.
I have tried using absolute positioning in both cases, but that did not resolve the issue.
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <!-- navbar-default removed -->
<!-- Brand and toggle get grouped for better mobile display -->
<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>
</div>
<a class="navbar-brand navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-center">
<li class="nav-item"> <a class="nav-link" href="#philosophy">Our Philosophy</a> </li>
<li class="nav-item"><a class="nav-link" href="#priceList">Price List</a>. </li>
<li class="nav-item"><a class="nav-link" href="#contactus">Contact Us</a>. </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="fb-like" data-href="http://www.kokleaners.com" data-layout="button_count" data-action="recommend" data-adapt-container-width="true" data-show-faces="false" data-share="true"></div>
</ul>
</div>
</nav>
CSS
#charset "UTF-8";
/* CSS Document */
html, body{
height:100%;
}
.navbar-default {
background-color:#72c5d5;
border-color: #284449;
z-index: 10;
opacity: 0.9;
}
.nav.navbar-nav.navbar-center li a {
color: #254053;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
color: #EF3927;
}
Here is the code I used for the fb like positioning that did not work.
#media all and (min-width:768){
.navbar-collapse fb-like{
position:absolute;
right:25;
Seems like this should be a pretty simple fix. But I am perplexed.
Here is the bootply.
Next time put it on jsfiddle.net
Replace your facebook div widget with this and it should do the trick. Your width was awkwardly set. So I changed it to 100% and it formatted properly.
<div class="fb-like fb_iframe_widget" data-href="http://www.kokleaners.com"
... " class="" style="border: none; visibility: visible; **width: 100%**; height: 20px;"></iframe></span>
</div>
The problem with the navbar-brand spacing was resolved by moving its placement into div.
See comments below for clarification.
The spacing of the FB-Widget can also be resolved by setting the margins for navbar-right in custom CSS.
.navbar-right{
margin-top: 20px;
margin-right:20px;
}
To improve layout on small screens, move up navbar-brand as so:
<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 navbar-left katrielsheader" href="#"><img src="images/Katriels_Kleaners_Script.png" alt="Katriels Kleaners"></a>
</div>
I have a navbar like the one below:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
with CSS:
#media (max-width:768px) {
.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
.navbar-default .navbar-collapse {
background: #eeeeee;
position: absolute;
width:100%;
top: 40px;
}
}
The navbar works properly on larger screens. The mobile screen is the problem. It works properly when used in desktops (i.e I have a mouse to click the links). However, when used using mobile devices (i used an iPhone), the links of the navbar are not working anymore. What's more, I cannot toggle the dropdown button anymore once I've clicked on something.
If it helps, here's the codepen link: codepen
EDIT: I found out now that the navbar is not working when I am using Safari on my iPhone. When viewed in Google Chrome it works just fine even if in mobile. Any ideas as to why it is not working in Safari? Thank you for your help.
Try updating your code with a wrapper div.
.nav-wrapper{
position: relative;
display: inline-block;
}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid text-center">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<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="nav-wrapper">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
</nav>
I have a simple sticky navbar that I am trying to put menu items on the left, center and right side. I found the bootstrap documentation with the navbar-right and navbar-left. Both of those work great, however if I want something to be in the middle I can't find a term/variable in the bootstrap library that does that. I have also tried adding align="center" to the li and a tags. Is there something specific I can call to center menu items in a bootstrap nav, or do I have to edit in manually with css align?
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"> pushed left by default? </a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right </li>
<li> right</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I posted this link as a duplicate - Center content in responsive bootstrap navbar, but realized the answer does not work correctly with navbar-right.
Try creating/adding a navbar-center class on the navbar-nav that you want centered.
<ul class="nav navbar-nav navbar-center" align="center">
<li class="active">pushed left by default?</li>
<li>center this part </li>
<li>and this too </li>
</ul>
Then add the following CSS:
.navbar-center {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
JSFiddle Here
The top right fixed nav bar for bootstrap come below the logo when resizing the screen resolution. I uploaded the image on https://www.imageupload.co.uk/image/5bDD
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation" style="border:0; border-radius:0;">
<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" style="padding:2px;" href="index.php"><img src="img/searchimage.png" width="51" height="45" /> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<i class="fa fa-home fa-2x"></i>
</li>
<li>
AboutUs
</li>
...
...
...
</ul>
</div>
</nav>
Please let me know how to solve this...
Thanks
You need to use media queries to specify a smaller font-size when the screen is smaller. Something like this:
#media (max-width: 900px) {
.navbar-inverse li a {
fonts size: 10px;
}
}
The 900px and 10px are for example purposes so you will have to check out which width and font-size will fix the layout problem.
Also, remove the inline-style padding for your list-item as that is not necessary for aligning the links
I implemented 1 logical menu item - date filter - as 3 Bootstrap navbar items - Prev button, date text, Next button. Since I am using icons for Prev and Next, all these 3 items can fit single line in mobile view (horizontal mode). But bootstrap puts each of them to single line which is using too much space and is not nice.
It there any way how to tell Bootstrap to treat those 3 items as single item and position them on single line in mobile view (but keep current focus behavior, i.e. each button is highlighted separately and text is not highlighted on focus)?
<div class="navbar navbar-inverse 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>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="disabled"><span class="glyphicon glyphicon-chevron-left"></span></li>
<li><p class="navbar-text">today</p></li>
<li><span class="glyphicon glyphicon-chevron-right"></span></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
Real life example is deployed in http://odpad-praha8.rhcloud.com/ so you can check also there. I am using the latest Bootstrap 3.
Add an custom .inline class on your items, and use this code :
<div class="navbar navbar-inverse 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>
</div>
<div class="navbar-collapse collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li class="disabled inline"><span class="glyphicon glyphicon-chevron-left"></span></li>
<li class="inline"><p class="navbar-text">today</p></li>
<li class="inline last-inline"><span class="glyphicon glyphicon-chevron-right"></span></li>
<li>Another link</li>
<li>Another link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
#media (max-width: 768px) {
ul.navbar-nav li.inline {
float: left; // make .inline items to float on mobile
}
ul.navbar-nav li.last-inline + li {
clear: both; // avoid next item to float
}
ul.navbar-nav li.inline a { // fix broken padding
padding-top: 15px;
padding-bottom: 15px;
}
}
Bootply
You can use custom media queries to do this.
Eg:
#media (max-width: 768px) {
ul.navbar-nav, ul.navbar-nav li {
display:inline
}
}
You can also use float if you need it in left and right sides.