How can I change the direction of a Twitter Bootstrap dropdown?
I have a dropdown like this:
But I want it to look like this:
From http://getbootstrap.com/components/#dropdowns-alignment:
Deprecated .pull-right alignment
As of v3.1.0, we've deprecated
.pull-right on dropdown menus. To right-align a menu, use
.dropdown-menu-right. Right-aligned nav components in the navbar use a
mixin version of this class to automatically align the menu. To
override it, use .dropdown-menu-left.
In your case, adding dropdown-menu-right class to the div that has the dropdown-menu class should do the trick.
Use pull-right or pull-left classes.
Here it is (using dropdown-menu-right):
<ul class="dropdown-menu dropdown-menu-right">
<li><a href"#">Action</a></li>
<li>Another action</li>
<ul>
Bootstrap 4
use "dropdown-menu-right" and "dropdown-menu-left"
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#username
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"><i class="fas fa-cog"></i> Account Settings</a>
<a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt"></i> Logut</a>
</div>
</li>
Output:
for more information visit documentation:
https://getbootstrap.com/docs/4.0/components/dropdowns/
transform: rotateY or -webkit-transform:rotateY will do the trick, let's apply it for the dropdown menu;
navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
-webkit-transform: rotateY(180deg);
}
Or you can insert this into .dropdown-menu or .open > .dropdown-menu classes due to your exact rquirement. Now it looks like:
As can be seen all links need to be reverted so it's simple to do with same CSS rule:
.dropdown-menu > li > a {
-webkit-transform: rotateY(180deg);
}
Now it's looking like:
Needs a bit cleanup via changing dropdown-menu's position by left:10px; and it will look like exactly how you wanted:
There has been a lot updated, since this post was created, so figured I would give an updated answer.
For Bootstrap 4+ you can use the classes dropleft, dropright, or dropup; in your lists/btn-group parent div.
Now, you can also use buttons as your dropdown-items.
Check out Bootstraps documentation here
There seem to be no option in Twitter Bootstrap to handle the direction on the dropdown. All that has some effect on the position of the arrow is this class .navbar .nav > li > .dropdown-menu:before Try fiddling with it to view changes in the direction of the drop down
Related
I am using the boilerplate _Layout page and only changed it to change the names and locations of the nav bar. I have been using basic bootstrap. I am confused on why the nav bar is not setting the active class to show which page I am currently on.
Here is the header HTML from _Layout.cshtml:
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">OmniPark Administration Tool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Organizations" asp-action="Index">Organizations</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="Core" asp-controller="Devices" asp-action="Index">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" asp-area="C2P" asp-controller="Payments" asp-action="Index">C2P Payments</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
Here is the CSS that it came with, but the rest is the bootstrap css.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
Then I have tried many variations of the javascript (jQuery?) to get the class to be set to active. This is the root of the problem. When I debug this I can set the active class manually on my links and they look good. I try to put breakpoints in, but it hits the top statement and skips over the rest (including the part where it sets the class to active).
<script>
$('.navbar-nav .nav-link').click(function () {
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
</script>
The issue here is that we need to set the active class on the nav-item li item instead of clicked nav-link link like:
$('.navbar-nav .nav-link').click(function() {
$('.navbar-nav li.active').removeClass('active');
$(this).closest('li').addClass('active');
})
You can also verify this from the docs:
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
you can see in the demos shown there that active is set on li instead of the nav-link itself
I basically changed to using this solution here because it works and I am able to also add dropdowns into the menu which is perfect for my future plans on this site.
I was stuck on using TagHelpers in my head and it was holding me back. This is a much better solution to my problem.
Add active class to menu item
You are using the wrong CSS selector. .nav-link is inside .nav-item. So use the CSS selector .navbar-nav .nav-item .nav-link in your JavaScript code.
I realize this is a duplicate of this question, but the answer given there isn't using the scrollspy plug in but is instead writing out all of the javascript to highlight active links on scroll.
I've gone through pretty much all other iterations of this question that I could find but my code looks the same as in the solutions given so I'm not sure of the problem. (most other questions are also not for bootstrap 4 beta but rather earlier versions)
I'm using the javascript file from this scrolling nav template to scroll down to a section when you click a link. This works, so the links are all connected to the sections by their ID's properly.
The template's JS file has the JS to activate scrollspy built in, but it's not working for me.
The body's position is set as relative.
The jQuery.js file is placed before the before the bootstrap.js file.
I've also tried the method of applying the data-spy and data-target to the body tag.
I have styled the .active class but before and after doing this, I've inspected my page in chrome, and the .active class is not being applied to the links as you scroll so I don't think the problem is related to CSS.
Here is the javascript:
$('body').scrollspy({
target: '#mainNav',
offset: 0
});
and the code:
<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;">
<div class="container-fluid">
<a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav">
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a>
</li>
<li class="nav-item navMenuBox">
<a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Based on the information provided, it's difficult to discern where the actual issue is coming from. My guess is that you're missing a dependency from the scrolling nav template from github, but I could be wrong.
If you haven't included the jQuery.easing from their package.json file, that could be the issue.
I've taken the code you were using and put it into a codepen project, and was able to make it work using jQuery 3.2.1 and jQuery-easing 1.4.1.
You can view it here.
SO. to fix this I realized that the spyscroll is mainly dependent on having either navbar-dark or navbar-light applied to your navbar. It would've been very helpful if this was in the documentation!
Even though I had navbar-dark applied, since I'd assumed the .active state was connected to the nav-links or nav-items, I had styled the nav-links, causing the .active state to not work.
To fix my issue I applied my custom styles to the .navbar-dark li a, and my custom active state to
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active
(this was pulled from the bootstrap css, I searched through it to figure out how the .active was being styled & just copy/pasted these classes into my custom CSS document)
Hope this helps someone else with a similar problem!!
In my react application one of the component is creating a button dropdown menu like below.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a onClick=doSomething href="#">HTML</a></li>
<li><a onClick=doSomething href="#">CSS</a></li>
<li><a onClick=doSomething href="#">JavaScript</a></li>
</ul>
</div>
Questions:
Giving href as # on anchor tag changes the url by appending #. If href is not given then hand click icon is not seen on menu while hovering over it. I don't want to change the URL and at the same time I want the hand icon to come on the dropdown menu.
Can I prevent default href behavior by some method like preventDefault or something similar?
Should I use button from react-bootstrap or this native html button is fine?
You can use the CSS cursor: pointer;
li{
cursor: pointer;
}
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Just add a style for the <a> tag and remove your href attribute.
a {
cursor: pointer;
}
I have an issue with the button dropdown from Bootstrap-Twitter 3.
JSFiddle
HTML
<div class="input-group">
<input type="text" class="form-control">
<!-- Split button -->
<div class="input-group-btn">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<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>
</div>
In the JSFiddle above, you can see an input stick with a dropdown button at its right.
The problem is that the list of the dropdown button is displayed in a way that the list is cutted (the viewport should not expand itself, however this is what happens).
Question
How can I tell this element to display the list from the right to the left (reverse of the current behaviour) ?
From the documentation:
By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.
<ul class="dropdown-menu dropdown-menu-right">
<!-- your li elements... -->
</ul>
Updated fiddle
Try Use :
class="dropdown-menu pull-right"
As you can see here : Updated Fiddle
This will ensure the dropDown menu is pulling to the right, which gives it float:right!important.
This will ensure it's not hidden behind.
EDIT: Rory McCrossan's answer is the recommended solution for this question
You can do this by CSS (overwrite the default rule) or you can custom with a new class:
.dropdown-menu {
right:0;
left: auto;
}
In fact is the same thing this class .pull-right from bootstrap library do:
CSS
.pull-right {
right:0;
left: auto;
}
This is straight from the bootstrap site's page. In this certain code i would like to know how to change the color of the text from blue to black. It is by default blue at the moment.
Site for reference and a live example: http://getbootstrap.com/components/
Code: The section the code is under is called "Using Drop downs" Tabs with drop downs.
<ul class="nav nav-tabs" role="tablist">
...
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
...
</ul>
Regards
Bootstrap dropdown buttons are like other bootstrap buttons. A default bootstrap button has the btn class.
You can change their themes by adding classes such as btn-primary, btn-info, btn-danger, etc.
For more examples of this check out http://getbootstrap.com/components/#btn-dropdowns.
use id on li and apply style in this way: example
<li id ="abc"</li>
Custom Style
#abc .dropdown-toggle {
color: black;
}
so it will take only for those drop-down-toggle class which has id "abc" and remove the !important from style
you can apply custom style on class "dropdown-toggle" in your css file
.dropdown-toggle {
color: black !important;
}