I have a simple top-fixed nav using Bootstrap 3.0 which utilizes the submenu feature. I'm attempting to have my submenu take up the full width of the container, not just the width of the combined submenu elements. The problem appears to be coming from the ul.dropdown-menu code in which the width is set to ~160px; Not only that, but it refuses to extend left, past the dropdown menu tab. This is a problem because my collapse-nav is set to sit on the right side. Oy.
Below is a fiddle of my current solution.
FIDDLE FIDDLE, YA'LL
HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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="index.html"></a>
</div>
<div class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li class="dropdown active">
Films <b class="caret"></b>
<ul class="dropdown-menu">
<div class="container">
<ul class="list-inline">
<li class="placeholder" id="pause"></li>
<li class="placeholder" id="hiccup"></li>
<li class="placeholder"></li>
<li class="placeholder"></li>
<li class="placeholder"></li>
<li class="placeholder"></li>
</ul>
</div>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
CSS (sorry it's so specific, I'm using SASS):
.navbar.navbar-default.navbar-fixed-top {
background-color: #454545;
border: none;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.active a, .navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li a:hover {
color: #ffcc00;
background-color: #454545;
height: inherit;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu {
list-style-type: none;
width: 100%;
background-color: white;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container {
background-color: white;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline {
list-style-type: none;
width: 100%;
}
.navbar.navbar-default.navbar-fixed-top .container .navbar-collapse.collapse.pull-right ul.nav.navbar-nav li.dropdown.active.open ul.dropdown-menu .container ul.list-inline li.placeholder {
margin: 0 20px;
height: 100px;
width: 70px;
background-color: #999999;
}
So far the closest solution I've come across is adding a container within the dropdown menu, however I'm still unable to extend the dropdown menu beyond it's ~160px width.
The general goal is to have a full-width dropdown menu. Currently not worried about what it looks like on mobile devices.
Thanks
I use Yamm3 to do this, it's quite easy to integrate and allows you to specify a full width for your mega menu.
http://geedmo.github.io/yamm3/
Related
i'm working on upgrading a website so it becomes responsive. I'm using twitter bootstrap. I already tried a couple of different nav bar templates that i found online and i always have the same problem. As you can see in the images in some resolutions the nav bar isn't collapsing the way it should.
The problem:
The navbar html code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed">
<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="index.htm">Index</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I also have this in my css:
#media (min-width: 768px) and (max-width: 991px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
.navbar-header {
float:none;
}
}
Any help would be appreciated!
This is the complete CSS (*taking into account your site structure) if you want to change your breakpoint for the navigation on smaller viewports.
You should also consider moving some of your links into dropdown lists which would allow you to avoid all of this.
#media (max-width: 1199px) {
#custom-bootstrap-menu .navbar-collapse.collapse {
display: none !important;
}
#custom-bootstrap-menu .navbar-collapse.collapse.in {
display: block !important;
}
#custom-bootstrap-menu .navbar-toggle {
display: block !important;
}
#custom-bootstrap-menu .navbar-collapse {
text-align: center;
display: block !important;
}
#custom-bootstrap-menu .navbar-header {
float: none;
display: block !important;
}
#custom-bootstrap-menu .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
#custom-bootstrap-menu .navbar-nav > li {
float: none;
}
#custom-bootstrap-menu .navbar-nav> li > a {
padding-top: 10px;
padding-bottom: 10px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<p>
<img src="http://www.huisjeinportugal.nl/images/top.jpg" class="img-responsive">
</p>
<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="index.htm">Index</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><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-menubuilder">
<ul class="nav navbar-nav">
<li>casa do meio
</li>
<li>casa brava
</li>
<li>casa velha
</li>
<li>pool
</li>
<li>prijzen
</li>
<li>over ons
</li>
<li>activiteiten
</li>
<li>gastenboek
</li>
<li>kaartje
</li>
<li>contact
</li>
<li>linken
</li>
</ul>
</div>
</div>
</div>
It looks like your navigation is fairly wide, so what you could do is simply change when the bootstrap nav collapses. Looking at your code, 1000px seems to be a good breaking point for the collapse to happen, but you can play around with that.
One solution would be to go and add a new media query that will overwite that of Bootstraps. This solution would be fine if you don't want to edit your bootstrap code directly:
#media (max-width: 1000px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.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;
}
}
Another, easier option, if you are using LESS is to change the variables that trigger the breakpoint. You could instead use something along these lines:
// Point at which the navbar becomes uncollapsed.
#grid-float-breakpoint: 1000px;
I am using the Bootstrap drupal theme. My menu items show up vertically, with styling (underline on hover and a dot next to the them. Am I missing something in my PHP or in my CSS? Also my hover dropdown isn't working. Not sure if that has to do with the way it is showing up now.
<div class="menu_wrapper">
<nav class="navbar" role="navigation">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">
<?php $navigation = menu_navigation_links('main-menu');
print theme('links__system_main_menu', array('links' => $navigation));?>
</a>
</li>
</ul>
</div>
<div class="clear"></div>
</nav><!-- end main-menu -->
</div>
CSS
/* Menu */
.menu-wrapper {
background-color: #c32523;
opacity: 40%;
width: 100%;
height: 50px;
border-bottom: 1px solid #000000;
}
.navbar {
color: #ffffff;
}
nav {
color: #ffffff;
text-decoration: none;
}
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
ul.nav li.dropdown ul.dropdown-menu {
margin-top: 0;
}
The menu wrapper class in your HTML is menu_wrapper with an underscore but in your css you used a hyphen .menu-wrapper. Change 1 of them accordingly and your styles will apply.
I have created a justified navbar in Bootstrap 3. My problem is that when I add a display:inline-block to vertically align my items, the active and clickable area doesn't fill the width and height beetween the borders anymore (please bear with me, my english is rusty).
HTML:
<div class="container">
<nav role="navigation" class="navbar-justified">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Menu produits</span>
<i class="fa fa-bars fa-2x"></i>
</button>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav nav-justified">
<li>Aliquam bibendum</li>
<li>Aliquam</li>
<li>Praesent eros ipsum</li>
<li>Quisque</li>
<li>Suspendisse id dapibus</li>
<li>Nullam consectetur dictum</li>
<li>Lorem</li>
<li>Aliquam bibendum</li>
</ul>
</div>
</nav>
CSS:
.nav-justified {
text-align: center;
}
.nav-justified > li > a {
color: #2f2f2f;
font-size: 12px;
display:inline-block;
vertical-align:middle;
}
#media (min-width: 768px) {
.nav-justified > li {
border-right: 1px solid #d5d5d5;
}
}
.nav-justified > li:last-child {
border-right: 0;
}
Here is a Bootply link to see the code in action : http://www.bootply.com/Zkl1LHJr1v
Add width: 100%; to .nav-justified > li > a. Then it should cover the whole length between the borders.
Since li is display: table-cell, its height increases due to two-lined a. However, small as don't get the same height, so I think you could add :hover to the li as a hack to achieve the same effect.
li:hover {
background: #EEE;
}
Till you find any better solution.
I am trying to code a bootstrap navigation structure with 9 (don't laugh at my client please) buttons.
I want the first 5 buttons on top of the other 4, aligned to the right. The problem is that when I align them to the right, the buttons reverse in order. I solved this by creating two different lists, but that makes it reverse it when making the screen smaller. I think there should be a simple solution, but I can't find it. You can see an example at: http://www.sanderfish.nl/haptokuijpers/index.html
Here is my HTML:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-left 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="index.html"><img src="assets/img/logo.png"</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Voor wie</li>
<li>Psychosomatiek</li>
<li>Haptotherapie</li>
<li>Diana Kuijpers</li>
<li>Vergoeding</li>
<li>Klachtenlijsten</li>
<li>Uitgeverij VIB</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
And this is the CSS:
#media (min-width: 768px) {
.navbar-nav {
float: right;
margin: 0;
text-align: right;
}
.navbar-nav > li {
float: left;
text-align: right;
}
.navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 10px;
display: block;
text-align: right;
}
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
text-align: right;
}
}
#media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
padding-right: 34px;
text-align: right;
max-width: 750px;
}
}
Thanks in advance!
You don't need any custom CSS, just separate the two chunks of links into separate navbar-navs, and do navbar-right on the one you want to the right: DEMO: http://www.bootply.com/X0kDjEwnga
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Voor wie</li>
<li>Psychosomatiek</li>
<li>Haptotherapie</li>
<li>Diana Kuijpers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Vergoeding</li>
<li>Klachtenlijsten</li>
<li>Uitgeverij VIB</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
You may need to address their overlap when at specific in-between widths, but that's another story.
I don't understand why are you doing this since you're overriding not only Bootstrap, but the concept of responsive design altogether, but you'll know. Anyways, simply change this part:
.navbar-inverse .navbar-nav > li > a {
color: #FFF;
float: right;
}
to
.navbar-inverse .navbar-nav > li > a {
color: #FFF;
float: left;
}
I am trying to decrease the height of the Bootstrap 3.1.1's navbar without using the less version of it. I have tried several ways of doing this by reading around on different sites, and none of them are decreasing the CSS's .navbar height.
I have managed to fix the padding on the .navbar-nav > li > a.
My HTML:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">QuadCMS</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Help</li>
</ul>
</div>
</div>
</div>
My CSS which overrides the Bootstrap to try to fix the navbar.
.navbar {
height: 25px !important;
}
.navbar-nav > li > a {
padding-top: 5px !important;
padding-bottom: 5px !important;
}
My main issue is with the actual height of the navbar, not the padding now. The padding of the navigation links are fixed and working at the small size. I have also tried changing the .navbar to .navbar-nav, and .navbar-fixed-top respectfully and nothing has worked yet.
Do I need to call a different CSS Class then the ones I have tried, or do I need to call two of the ones I have already tried to get the effect needed?
Here is the default .navbar styling:
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
You need to overwrite the min-height property. You can use the value inherit.
Example Here
.navbar {
height: 30px;
min-height: inherit;
}
.navbar-nav > li > a {
padding-top: 5px;
padding-bottom: 5px;
}
.navbar-brand {
padding:5px 0 0 0;
}