-
-
Notifications
You must be signed in to change notification settings - Fork 78.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
add ability to control navbar dropdown menu horiz direction #10370
Comments
Please provide a live example of the problem (e.g., via http://jsbin.com/aKiCIDO/1/edit). |
You should be using |
Hi This should help: http://jsbin.com/EpIpevo/2/edit?html,output.
P.S. pm. me if i'm using bootstrap the wrong way! Mvg |
Per the navbar docs examples, I'm pretty sure you shouldn't be using alignment classes on elements within a list. |
Hi I read the docs again and found that Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes. Both classes will add a CSS float in the specified direction. For example, to align nav links, put them in a separate
These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes. So do you have a solution for my problem? |
I'm not really sure what you're trying to do in the first place. |
Well I want the first
BTW. I am currently not looking for any behaviour on devices smaller than 970px. Mathias De Beyser On Monday 2 September 2013 at 20:51, Chris Rebert wrote:
|
So, it's that you want to control which horizontal direction the options-list portion of the dropdown menu "bulges" out in? |
Yeah Exactly! The weird thing is when the navbar-left is set then I am able to control the horizontal direction of the drop down menu using
Mathias De Beyser On Monday 2 September 2013 at 21:31, Chris Rebert wrote:
|
The issue is that it's a hack |
Hi Thx for understanding. BTW. I was trying to use the .pull-left trick/hack cause the docs for a "drop down" say that: Add .pull-right to a .dropdown-menu to right align the dropdown menu. |
Huh. Didn't know that. Well, then I guess it's more that it doesn't happen to work in the navbar and a new class would probably be necessary to do it cleanly. |
The weirdest thing of all is that their is a class that clears the other way around. So the default behaviour of a navbar-left, pulls the drop down list left. If you give that drop down list the class .pull-right. You get the behaviour you would expect. The horizontal alignment of the drop down list will be right. This is cleared by this line of css (this line can be found in bootstrap.css, just CMD+F .pull-right) But their is no clear/fix for the other way around. So in this case the default behaviour of a navbar-right, pulls the drop down list right… Right? :) If you give that drop down list the class .pull-left. You would expect that the drop down list would be horizontally aligned left. Doesn't work. That's why I proposed the line of css |
…ent options * Removes an old pair of selectors that didn’t properly target the right-aligned navbar alignment of dropdown menus. * Deprecates the `.pull-right` alignment in favor of a more specific and unique class name. * Adds `.dropdown-menu-right` as the new alignment class. This is then mixin-ed into the `.navbar-right.navbar-nav` dropdown menus for auto-alignment. * To override that auto-alignment, use `.dropdown-menu-left` as needed.
…ent options * Removes an old pair of selectors that didn’t properly target the right-aligned navbar alignment of dropdown menus. * Deprecates the `.pull-right` alignment in favor of a more specific and unique class name. * Adds `.dropdown-menu-right` as the new alignment class. This is then mixin-ed into the `.navbar-right.navbar-nav` dropdown menus for auto-alignment. * To override that auto-alignment, use `.dropdown-menu-left` as needed.
[Original title: Navbar.pull-right dropdown.pull-left doesn't work.]
This should fix it:
.navbar-nav > li > .dropdown-menu.pull-left {
right: auto;
left: 0;
}
The text was updated successfully, but these errors were encountered: