I'm having a hard time trying to center a dropdown which is toggled by a button in a group. The group is centered correctly but the dropdown continues at the left corner.
Here is an example.
Can someone help?
Thanks in advance!
If you want to center your div.dropdown inside another div do it like so:
#dropdown1 {
width: 183px;
margin: 0 auto;
}
The drawback of it is that you need to know the exact width of the element you are centering (thats the reason I use an id as a selector; of course you need to assing it first).
See how it works on your updated fiddle.
Maybe you are looking for something like that : Live demo (jsfiddle)
.centered {
text-align: center;
}
.centered .dropdown {
display: inline-block;
min-width: 500px; /* Needs to be big enough for the menu to be centered in it */
}
.centered .dropdown.open .dropdown-menu {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
}
<div class="centered">
<div class="dropdown">
<a class="dropdown-toggle btn" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
Edit completed the CSS
Related
I am trying to use the Bootstrap dropdown on a centered image, but I can't get the dropdown to be centered as well.
Fiddle with my current code
<div class="row">
<div class="col-md-12 profile-picture text-center">
<div class="dropdown col-md-3">
<img src="http://i.imgur.com/9qfJGrz.jpg" alt="" class="profile-photo img-thumbnail" data-toggle="dropdown" />
<ul class="dropdown-menu" role="menu" aria-labelledby="Change Settings">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Upload new picture</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Remove</a></li>
</ul>
</div>
</div>
</div>
As you can see the dropdown gets aligned to the left, is there a way to get it to be centered underneath the image? It's in a col-md-3 so try resizing the screen as well.
Add display:inline-block to your dropdown.
.dropdown
{
display: inline-block;
}
Here's a fiddle.
position: absolute, left:0px and float:left are the causes.
Fix:
.profile-picture .dropdown-menu {
position: relative;
clear: both;
float: none;
}
The width will stick the the width of the column :)
If you don't like that, use these, or remove the column setup:
width: 170px;
margin: 0 auto;
See updated fiddle
This would be one solution, which will work responsively as long as you declare a width for the menu:
.profile-photo {
width: 170px;
height: 170px;
margin: 0 auto;
display: block;
}
.dropdown-menu {
margin-left: -85px;
width: 170px;
left: 50%;
position: absolute;
}
I removed your col-md-3 as you are just positioning the menu halfway across the col-md-12 with this method.
`<ul id="main-nav">
<li>
Menu item
<div class="sub-nav">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -80px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -160px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -240px;">
<p>Anything</p>
</div>
</li>
<li>
Menu item
<div class="sub-nav" style="left: -320px;">
<p>Anything</p>
</div>
</li>
`
I want to be able to put content into the div (Links, Images, Text, etc). I am trying to make the div box the same size as the navigation bar its self specifically 1050px in width (I want the navigation bar and div box to be 1050px in width). When a user hovers over a link in the navigation bar I want the div box to appear with all its content inside.
this is something like it: http://jsfiddle.net/ELyQW/2/ ~ (But if you look closely you can see the box moves on every new link which I do not want to happen.)
Look at the navigation bar on this website for similar reference. pacsun.
Thank You SO much for your help!
And if you do help me create a new bar I strongly recommend you do not use the jsfiddle I posted, but if you have to go for it!
Thank you once again!
Yay success!
http://jsfiddle.net/hjZz9/1/
<div id="main-menu-container">
<ul id="main-menu">
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
<li>
Main menu
<div class="sub-menu">
Testing 123
</div>
</li>
</ul>
</div>
#main-menu-container {
position: relative;
}
#main-menu {
margin: 0; padding: 0;
list-style: none;
}
#main-menu li {
float: left;
margin-right: 15px;
}
#main-menu li:hover .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
left: 0; right: 0;
padding: 10px;
background-color: #eee;
}
Edit: I've added right: 0; to .sub-menu just so it stretches from end to end, you can change this to your own preference of course.
You could try position fixed instead of absolute. Then left position both the div and ul correctly and you will achieve it. Here is a sample
.sub-nav {display: none; position: fixed; left: 40px; width: 400px; z-index: 999; background: #f2f2f2;}
I have this HTML which renders a bootstrap dropdown under the object. It is possible to make it apear above the Title button?
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown">
Title
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a>Option 1</a></li>
<li class="dropdown-submenu"><a>Option 1</a></li>
(various number of <li>)
</ul>
</div>
I've tried with position:absolute; top:50px but doesn't work for any case.
Thanks!
This is by default part of what Bootstrap can do. It's in the docs under Button Dropdowns - Dropup menus
<div class="btn-group dropup">
As it's absolutely positioned, you will need to have some space above the button so you can see the drop up menu, so I wouldn't use it at the top of a page.
I've set up a fiddle here for you. If you remove the <br> at the top, you'll see that the menu options are hidden at the top of the output box.
you can rotate the container, and rotate the items inside to appear normal :)
its just a few lines of css.
css:
.dropdown {
left: 40px;
top: 150px;
transform: rotate(180deg);
}
.dropdown a, .dropdown button {
transform: rotate(180deg);
}
.dropdown a {
padding: 5px 35px 5px 5px;
}
.dropdown-menu {
margin-left: -18px !important;
}
fiddle
IMO its very simple and elegant solution, the only downside you will have to use transform or 'left' with important to override Bootstrap's direct styling on the element to adjust the opened menu
I am having problems getting text-overflow to work. I also cant get normal overflow:hidden to work either. Any ideas or suggestions?
Here is the css code without either. (Please note it is written in OOCSS / BEM syntax).
/* Base
=====================================================*/
/* Nav
=================================================*/
/* B
---------------------------------------------*/
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
/* E
---------------------------------------------*/
.nav__item
{
float: left;
position: relative;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
and the HTML
<ul class="pivot nav" style="font-size:24px">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
List Item 1
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 2
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 3
</a>
</li>
</ul>
I also tried wrapping it in a parent div and applies text-overflow / overflow to that..no luck.
I'm guessing that the lines wrap before any overflow rule kicks into action. You will need to do this to prevent line breaks:
.nav__item {
white-space: nowrap;
}
I'm not sure which element you want to hide the overflow on, so I created this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up any confusions.
adding display: inline-block; *display: inline; zoom: 1;
allows nowrap to work. It does not work on display:block;
I am currently working with a bottom navigation bar for a test site. The problem is that the navigation bar does not center properly. I have added the .left attribute to keep each block list beside each other. How can I get this bottom navigation bar to center automatically(no matter the amount of lists added)? Example
CSS related to bottom navigation
<style>
.bottomnavControls {
padding-top:10px;
padding-bottom:10px;
padding-right:0;
text-decoration:none;
list-style:none;
}
#footer {
position: absolute;
width: 100%;
bottom: 0;
background: #7a7a7a;
border-bottom: 15px solid #000;
}
.left {
float: left;
}
.right {
float: right;
}
</style>
HTML
<div id="footer">
<div class="bottomNav">
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Home</b></li>
<li>Login</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Category</b></li>
<li>Games</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>About</b></li>
<li>Who We Are</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Links</b></li>
<li>Google</li>
</ul>
<ul class="bottomnavControls left">
<li style="padding-bottom:5px;"><b>Other Stuff</b></li>
<li>Stuff</li>
</ul>
</div>
</div>
My current Bottom navigation:
My desired outcome:
Instead of float, you should use display: inline-block here. This way, you can easily center them by putting text-align: center on the container.
.bottomNav { text-align: center; }
.bottomnavControls { display: inline-block; }
and remove left class.
Note: display: inline-block works fine in modern browsers, but it needs a hack in IE7.