While using Bootstrap 3 with custom font in navbar the position of carot doesn't remain vertically aligned with text.
I'm not using any custom classes - just li elements with .active and .dropdown respectively, only font-family was changed. I guess that the issue has to do with font's height itself.
How can I fix this issue without hacking carot's position? I'm building Bootstrap with LESS, so if there are any relevant variables corresponding for something like basic font height (or maybe line-height?) let me know.
Edit: Providing code example (just an ordinary navbar)
<nav class="navbar navbar-default">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li class="dropdown">
Link <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The caret already has a class in bootstrap. I would recommend using that for positioning.
.caret {
display: inline-block;
width: 0;
height: 0;
margin-top: -10px;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid \9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
You can put the caret in a span:
<li class="dropdown">
<a class="dropdown-toggle" style="font-size: large" data-toggle="dropdown" href="#">HasDropdowns<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
Related
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/
I am using the Bootstrap navbar-fixed-top method to create a floating nav bar.
I have a few issues I cannot figure out:
Why are my logo and my social icons disappearing when I reduce screen-width to 769px?
Why is my logo and social icons right at the top of the page?
My social icons are too small and bunched up next to each other. How do I change this?
http://codepen.io/dhruvghulati/pen/qrdNBm
What should I do to have a persistent nav bar which is more standard?
.collapse class looks like this:
.collapse {
display: none;
visibility: hidden;
}
And there is:
#media (min-width: 768px)
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
visibility: visible!important;
}
Which means .collapse will be not displayed until screen is 768px width.
Also there is (used for logo):
#media (min-width: 768px)
.navbar-left {
float: left!important;
}
That makes logo float left since screen is 768px width, there is similar class for .navbar-right which is used for social icons container.
You should probably visit the official Bootstrap docs to get more information on navbars. I would use this as the template for your navbar and go from there:
<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>
<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 -->
Essentially, Bootstrap replaces your nav link with a hamburger button at that screen size. Also, you should give the logo the proper classes (from the code above) to make sure it's always visible. To make the navbar stick to the top of the page, simply add the navbar-fixed-top class to the nav tag. the opening tag should now look like this: <nav class="navbar navbar-default navbar-fixed-top">.
I think its because you are using position:absolute; try using position: relative; instead
I'm trying to extend this custom component example http://getbootstrap.com/examples/cover/ by adding appropriate style to dropdown element.
<li class="dropdown masthead-dropdown">
<a class="" data-toggle="dropdown" href="#">Media<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Videos</li>
<li>Pictures</li>
</ul>
</li>
CSS:
.masthead-dropdown{
background-color: transparent !important;
border-color:white !important;}
Custom styles are included after bootstrap.css, but they doesn't work.
Going by the Cover menu list, I used it to guess the part of your code since I don't know what is wrapping the <li>:
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li><ul class="dropdown">
<button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Media
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Videos</li>
<li>Pictures</li>
</ul>
</ul></li>
</ul>
</nav>
</div>
</div>
Then add to your CSS:
.dropdown-toggle {
background-color: transparent;
border-color: #fff;
border-style: solid;
border-top: none;
border-right: none;
border-left: none;
}
And you can change the dropdown background colors with this:
.dropdown-menu{
background-color: #000;
}
And the links font color:
.dropdown-menu>li>a{
color: #fff;
}
JSFiddle
I would like to prevent the Bootstrap .dropdown-menu from ever being wider than the main nav bar (which I have restricted to be the width of the .container class). I'd like for the dropdown menu to take up the width of the container class, but it shouldn't extend beyond that on either side.
Any ideas how to accomplish this, preferably using CSS?
Here's an example of what it currently looks like and what I'd like it to look like:
Here's a boiler plate navbar with a dropdown menu that has one really long menu item:
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- 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</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action a really long menu item that extends way beyond the limits of "container" and may even extend beyond the view port area to the right, making some of the text unreadable.</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>
</div><!-- /.navbar-collapse -->
</nav>
</div>
Explanation
Bootstrap's adds position: absolute to the .dropdown-menu class. As you may know, all absolutely positioned elements are positioned in relation to the first parent element they find with position: relative. In Bootstrap, this is provided by the .dropdown wrapper
So if you want to position the element relative to the container, and not the nav item, we'll have to remove relative positioning from the .dropdown wrapper. You can do this by resetting the value to the initial value for the position property, which is static.
Congratulations! The menu is no longer constrained by the .dropdown element, but we still have some work to do.
Because bootstrap was not intending to space constrain the menu, menu items are given the property white-space: nowrap so they'll extend as long as they need. Think lines of code inside code blocks here on stack overflow (1 line = 1 line). Since we want the line to eventually end, this won't do. So we'll reset the anchor tags back to white-space: normal.
At this point the .dropdown-menu should take up the full size of the .navbar (which itself takes up the full size of the .container). This is where yamm3 is doing something really cool. It sets left: auto on the dropdown-menu.
According to MDN on the left property:
auto is a keyword that represents:
for absolutely positioned elements, the position of the element based on the right property and treat width: auto as a width based on the content.
So setting the .dropdown-menu to left:auto will cause the menu to start in its current location and extend all the way to the right of the container.
Just Codes
Just add the .fill-width class to your .dropdown element and include the following CSS:
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
Working Demo in jsFiddle
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
right: 0;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<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" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown fill-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I tried this method (their fiddle) to enable scrollable menu with Bootstrap, but with that approach, the scrollable menu expands its container -- fiddle -- the non-scrollable menu, correctly, does not do this.
How can I fix this? Suggestions on other approaches compatible with Bootstrap are appreciated too!
For reference, here is the HTML from the first method's fiddle:
<ul class="nav">
<li class="dropdown">
<a class="icon-key icon-white" data-toggle="dropdown" href="#" style=
"font-weight: bold"></a>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 1 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-group"></i> <b>My Groups</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
User
</li>
<li>
Administrators
</li>
<li>
Some Other Group
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu header 2 -->
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-user"></i> <b>My Roles</b>
</li>
<li>
<div class="dropdown-menu scroll-menu scroll-menu-2x"
style="margin-left: 2em">
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<li>
Core Users
</li>
<li>
Admin
</li>
<li>
Some Other Role
</li>
</ul>
</div>
<ul class="dropdown-menu scroll-menu scroll-menu-2x">
<!-- Additional menu items omitted for brevity -->
</ul>
</li>
</ul>
</div>
<div class="dropdown-menu" style="margin-left: 2em">
<ul class="dropdown-menu">
<!-- static non-scrollable menu footer -->
</ul>
</div>
<ul class="dropdown-menu">
<li class="disabled">
<i class="icon-chevron-up pull-left"></i> <i class="icon-chevron-up pull-right"></i>
</li>
</ul>
</li>
</ul>
And the CSS:
/* So we wont impact the original bootstrap menu or it's pseudo call-out
arrow the menu is wrapped in a sub dropdown-menu with a chained scroll-menu */
ul.scroll-menu {
position:relative;
display:inherit!important;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
-moz-overflow-scrolling:touch;
-ms-overflow-scrolling:touch;
-o-overflow-scrolling:touch;
overflow-scrolling:touch;
top:0!important;
left:0!important;
width:100%;
height:auto;
max-height:500px;
margin:0;
border-left:none;
border-right:none;
-webkit-border-radius:0!important;
-moz-border-radius:0!important;
-ms-border-radius:0!important;
-o-border-radius:0!important;
border-radius:0!important;
-webkit-box-shadow:none;
-moz-box-shadow:none;
-ms-box-shadow:none;
-o-box-shadow:none;
box-shadow:none
}
Bootstrap 5 (update 2021)
The dropdown markup has changed for BS 5 as the data- attributes have changed to data-bs-. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
https://codeply.com/p/shJzHGE84z
Bootstrap 4 (update 2018)
The dropdown markup has changed for BS 4 as the items have their own dropdown-item class. However, setting max-height still works to make the dropdown scrollable...
.dropdown-menu {
max-height: 280px;
overflow-y: auto;
}
Bootstrap scrollable dropdown
Alternative horizontal menu for Bootstrap 4 using flexbox
Bootstrap 3 (original answer)
I think you can simplify this by just adding the necessary CSS properties to your special scrollable menu class..
CSS:
.scrollable-menu {
height: auto;
max-height: 200px;
overflow-x: hidden;
}
HTML
<ul class="dropdown-menu scrollable-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
Working example: https://codeply.com/p/ox7JC49vmT
You can use the built-in CSS class pre-scrollable in bootstrap 3 inside the span element of the dropdown and it works immediately without implementing custom css.
<ul class="dropdown-menu pre-scrollable">
<li>item 1 </li>
<li>item 2 </li>
</ul>
For CSS, I found that max height of 180 is better for mobile phones landscape 320 when showing browser chrome.
.scrollable-menu {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
Also, to add visible scrollbars, this CSS should do the trick:
.scrollable-menu::-webkit-scrollbar {
-webkit-appearance: none;
width: 4px;
}
.scrollable-menu::-webkit-scrollbar-thumb {
border-radius: 3px;
background-color: lightgray;
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.75);
}
The changes are reflected here: https://www.bootply.com/BhkCKFEELL
Do everything in the inline of UL tag
<ul class="dropdown-menu scrollable-menu" role="menu" style="height: auto;max-height: 200px; overflow-x: hidden;">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
I just fix this problem in my project-
CSS code
.scroll-menu{
min-width: 220px;
max-height: 90vh;
overflow: auto;
}
HTML code
<ul class="dropdown-menu scroll-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Action</li>
..
<li>Action</li>
<li>Another action</li>
</ul>
i hope this code is work well,try this.
add css file.
.scrollbar {
height: auto;
max-height: 180px;
overflow-x: hidden;
}
HTML code:
<div class="col-sm-2 scrollable-menu" role="menu">
<div>
<ul>
<li><a class="active" href="#home">Tutorials</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>