height on the.navbarcontainer and since that is the menu not vertical anymore. display:inline-block didn't worked for me. There must be a solution without giving the menu a padding to fix it.
How do i get the menu vertical align into the .navbar container? Im using bootstrap as framework
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="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>
Brand
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</div>
Jsfiddle
.navbar{background-image: linear-gradient(90deg, #bed970, #54c1b5);background-size: 100% 4px;background-position: 0 0;background-repeat: no-repeat;-webkit-box-shadow: 0 0 4px #c8cacc;box-shadow: 0 0 4px #c8cacc;border: none;font-size: 14px;min-height: 70px;}
Assuming you want to keep your height of 70px the simplest solution is to change the line-height as per CodeRomeos comment above.
.navbar-brand, .navbar-nav li a {
line-height: 40px;
}
https://jsfiddle.net/hnyadr4s/1/
The issue seems to be that min-height is being set to 70px on the .nav element
if you add the following css
.navbar{min-height:inherit;}
then it should be ok
https://jsfiddle.net/ogvs98LL/
or you can add padding to the top if you want to keep the height
https://jsfiddle.net/pfjL9jy6/
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 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
I have the following navbar:
<nav class="navbar navbar-default navbar-fixed-top" 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" 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navigationlinks" id="bs-example-navbar-collapse-1" style="">
<ul class="nav navbar-nav main-navi uppercase">
<li>About</li>
<li>Values</li>
<li>Team</li>
<li>Portofolio</li>
<li>Join</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I want to move the links some pixels on the right, so I tried margin-right:100px; but it doesnt work, Any idea why?
.navigationlinks{
margin-top: 10px;
margin-right:100px;
background:black;
opacity:0.6;
border-style:none;
}
Margin-top is working properly.
By Default,
ul has a padding-left: 40px,
Just give a style like,
ul
{
padding-left: 0;
}
As a part of suggestion,Just add a CSS reset before starting to develop.It can be found here,
http://meyerweb.com/eric/tools/css/reset/
Regards.
You can adjust padding to whatever you need:
li a{
padding-left :5px !important;
padding-right :5px !important;
}
Do you whish to have something like Demo or something else?
CSS
.navbar-nav>li {
margin-left:50px; /* use margin or padding values to make it move right/left accordingly */
/*padding-left:50px;*/
}
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.
I have a CSS issue that I cannot even begin to get my head around. I have a navbar with the standard collapsed button, that when clicked shows rows of links. I have a CSS media query that stretches the rows and centers the links as so:
http://imageshack.us/a/img89/4940/t678.png
Here is the CSS that does the stretching and centering:
/* when the navbar becomes a button, center and stretch the dropdown links */
#media (max-width: 992px) {
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in {
width: 100%;
text-align: center;
margin: 0 auto;
}
}
Unfortunately, when you first press the collapsible button to unfold the rows, the text does not appear centered. It takes a full 1000ms (1s) for the text to center align. You can literally watch it go from the far left side of the screen to the center.
This leads me to believe I am doing something wrong with my CSS.
How can I fix this issue?
The HTML:
<!-- navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- navbar header -->
<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>
<a class="navbar-brand" href="#">
<img class="img-responsive" src="assets/img/logo.png" >
</a>
</div>
<!-- collapse -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Services</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- /navbar -->
I found a solution.
To center the text immediately without delay, change the CSS selector from
div.navbar-collapse.navbar-ex1-collapse.navbar-right.in
to
div.navbar-collapse.navbar-ex1-collapse