The default bootstrap nav does this when the screen is too small:
The gap beneath the 'Hotels' button shouldn't be there when I hover over the link, it's caused by the 'Private Hire' text being too long and pushing the nav down a bit.
Is there any way to get the white background to take up the full height of the nav?
I have been looking into the twitter bootstrap navbar and i found a way to get rid of that whitespace.
Quite simple....
.navbar-nav{
white-space: nowrap;
}
#media (min-width: 1200px){
.navbar-nav {
font-size: 22px;
}
}
#media (min-width: 994px) and (max-width: 1199px){
.navbar-nav {
font-size: 17px;
}
}
#media (max-width: 994px){
.navbar-nav {
font-size: 15px;
}
}
UPDATE 2:
Now I've got it. Please check this css code:
<style> a { color: #fff; }
.navbar {
background-color: #122B41 !important;
color: #fff;
height:100px; }
.navbar > div { height:100% !important; }
.navbar > div > div { height:100% !important; }
.navbar > div > div > ul { height:100% !important; }
.navbar > div > div > ul > li { height:100% !important; }
.navbar > div > div > ul > li > a { height:100% !important; }
.navbar-collapse.collapse { height:100% !important; } </style>
As I wrote in my UPDATE 1 statement, it's based on the default example of the bootstrap navbar.
Does this solve your problem?
UPDATE 1:
I've created a blank page, just with the default navbar example from the bootstrap page. I've just added some color via css (see style area) for better color display of the navbar. Here is the code of my default page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<link rel="stylesheet" href="bootstrap.min.css"></link>
<link rel="stylesheet" href="bootstrap-theme.min.css"></link>
<link rel="stylesheet" href="bootstrap-theme.min.css.map"></link>
<style>
a {
color: #fff;
}
.navbar {
background-color: #122B41 !important;
color: #fff;
}
</style>
<script type="text/javascript" src="jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="npm.js"></script>
</head>
<body>
<nav class="navbar navbar-primary">
<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" 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" 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">
<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>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
</div>
</nav>
</body>
</html>
I'm wondering, because the default navbar, has exactly the desired "full-height". Please see my screenshot:
Maybe you provide the code of your navbar and additional css of your page?
ORIGINAL:
You can set the line-height property of the link accordingly to the height of your navbar via css.
.navbar-nav>li>a {
line-height: <height_of_your_navbar>px;
}
Related
I've used Bootstrap 3.3.7 in my web design. It's working fine with Mobile, Desktop or Laptop. But for a tablet, I can't see three bar menu. If we take bootstrap default navbar,
<nav class="navbar navbar-default">
<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" 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" 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">
<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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
It doesn't work for a tablet device. This is not only mine, you can see in Bootstrap website. When you browse on a tablet, you will notice that. Is it intentionally left or else something.
I would be very much thankful for your suggestion. I guess it will help for other who get such issue.
Thanks.
You can add some CSS rules if you want to see three bar menu on tablets. Bootstrap shows that menu for <768px.
#media (max-width: 1023px) { //1024 px for laptop
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Not a big expert in CSS and responsiveness design, I try to collapse my navbar using a media query. The issue is that for dropdown menus, the responsive design is not applied correctl : The dropdown menus are displayed like on a large desktop device.
What I want is this :
Result Expected
But the result I obtain is this :
Current result
My code is actually the following :
<nav class="navbar navbar-default">
<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>Action
</li>
<li>Another action
</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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown"> Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="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>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
And my media query is the current one as I found googling the web :
#media (max-width: 992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
Additional info : The menu is displayed well when the viewport size is under 768px.
I guess, there is something missing on my media query for handling the dropdown menu case but I don't know what it is ? Can somebody help me ?
Thanks a lot.
here is your fiddle just remove default style dropdown
jsfiddle.net/qxgy6L9b/18/
So, by default Bootstrap show logo on left corner, but on resizing it is still on the left. I want to put it in the middle to make it nicer display.
Image of what i have:
What i have
Image of what i want to be displayed:
What i want
I have this code to display Bootstrap menu in Wordpress:
<header>
<div class="menu">
<nav class="navbar navbar-default navbar-static-top">
<div class="container" id="menu2">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
<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="<?php echo esc_url( home_url( '/' ) ); ?>">
<img alt="Logo" src="<?php bloginfo('template_url');?>/img/logo.png">
</a>
</div>
<div class="navbar-collapse collapse col-md-9" id="menu1">
<?php wp_nav_menu(array(
'theme_location' => 'primary',
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right'));
?>
</div>
</nav>
</div>
</header>
I tried text-align:center, but it only works for links, not for logo
You can rewrite a different layout for your header with logo in the center and make use of bootstrap helper classes making visible the appropriate header. for your reference. http://getbootstrap.com/css/#responsive-utilities
Another approach is to play with offsets
http://getbootstrap.com/css/#grid-offsetting
Ok, i solved the problem by adding this:
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
Now the brand logo is centered when there is no space and links go down.
I also created clean Bootstrap navbar example without Wordpress for another users who want to see how it works (run and display it on full screen and resize window to see effect):
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
#media (min-width:768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar-brand{
display: inline-block;
float: none !important;
}
.navbar .navbar-collapse {
text-align: center;
margin: 0 auto;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
}
#media(max-width:1200px) {
.navbar-header {
text-align: center;
margin: 10px;
float: none !important;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<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" 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">
<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>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
</header>
</body>
</html>
I have a bootstrap 3 navbar.
JSFiddle
<div class="navbar navbar-inverse no-print">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="/portal/home/index/">Logo of Site</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
</div>
</div>
When the width of the window is full desktop size it is correct.
When the width of the window is smaller mobile phone size it correct.
In between these two sizes it wraps this menu as well as doubling the menu's height which I don't want.
I think my only option is probably to increase the mobile width to increase with inbetween widths so the navbar shows in mobile mode in the screenshot.
What css do I need to achieve this?
How do I force the right navbar <ul> to not be allowed to move below the left navbar <ul>?
Try this...
#media (max-width: 1230px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
From: http://www.bootply.com/120951
By default, the navbar toggles and becomes accessible via the burger menu at viewports <= 767px...
Your best bet (something I do all the time with BS!) is to make is collapse at larger viewports. You can do this with this handy snippet of code.
#media (min-width: 768px) and (max-width: 991px) { /* You can change the max-width to whatever you want... */
.parent-class .navbar-collapse.collapse {
display: none;
}
.parent-class .navbar-collapse.collapse.in {
display: block;
}
.parent-class .navbar-header .collapse, .navbar-toggle {
display:block;
}
.parent-class .navbar-header {
float:none;
}
}
The above is a modified version of another answer on SO from some time ago - I can't find the link to it (I have this snippet lurking on my PC as I use it often).
You'll notice I've prepended .parent-class to the selectors above, this is to ensure these styles override the default BootStrap styles which don't normally get overridden till 767px and below...
<ul> is a block level element
you can use all li items in single <ul>
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
My Menu Processes<span class="caret"></span>
</li>
<li class="dropdown">
Enquiries<span class="caret"></span>
</li>
<li class="dropdown">
Admin Reports <span class="caret"></span>
</li>
<li class="dropdown">
System Maintenance<span class="caret"></span>
</li>
<li>
<a>Change password</a>
</li>
<li>
Welcome Firstname Lastname
</li>
<li>
Log Out
</li>
</ul>
Or you can align right and left align both <ul> and set tab view to set 12 columns each so both <ul> look better in tab view
mostly password login etc goes to top bar in a separate div.......so it will not break menu alignment
While modifying Bootstrap vanilla's css, I found a weird blinking effect when you click on a dropdown then click outside of it (in the body for example) :
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<style>
.navbar-default {
background-color: #222;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-nav > li > a {
color: #FFF;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .dropdown > a:focus,
.navbar-default .navbar-nav > .open {
background-color: #444;
color: #FFF;
}
#media (min-width: 3000px) and (max-width: 3000px) {
.collapse {
display: none !important;
}
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<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" 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" 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>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>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
To make the snippet actually displays the error, you need to see it within a full page.
I also made a JSFiddle to make things clearer, and less difficult to explain.
Do you have any idea about which css selector should I use to fix it ?
The element you need is the a.dropdown-toggle. I don't know how much specific is bootstrap when styling it, or even if it uses inline-style, but if you use !important you can see that the blinking stops.
.dropdown-toggle {
background-color: transparent !important;
}
Updated fiddle
Update:
Bootstrap uses: .nav .open>a, .nav .open>a:focus, .nav .open>a:hover
Check out with the below link and let me know if its working fine now.
https://jsfiddle.net/98o4kakg/3/
.navbar-default .navbar-nav > .open {
background-color: #444;
color:#FFF;
}
You need to style your dropdown link instead of the dropdown itself by adding this in your css :
.navbar-default .navbar-nav > .dropdown > a {
background-color:#222;
color:#FFF;
}
Including more tags and classes will hold a higher priority over a style on the same element without the extra classes.
For instance : just adding body before a class can make the class more specific.
I've updatded your JSFiddle as well.