I am trying to create a dropdown list in the navbar that matches the style of the rest of the navbar. I have not overwritten any of the bootstrap classes to my knowledge and I am wondering if there are any classes that have the same styling for a dropdown list.
I have been looking through other articles and most seem to just use a random class and it works correctly. I tried to make a custom CSS class for it but I was unable to successfully match the header.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Management
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#Url.Action("Index", "Management")">Statistics</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Production")">Production Lines</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "Announcement")">Announcements</a>
<br />
<a class="dropdown-item" href="#Url.Action("Index", "TestStation")">Test Stations</a>
</div>
</li>
When creating a dropdown list, is there a special class to use that matches the navbar or do I have to create a custom one?
dropdown-item background color in bootstrap is white and if you want change it you can change it in your page style. you can add this code to your head tag:
.dropdown-item{
background-color: #2e89e5;
color: #fff;
}
Assuming your nav-bar uses the primary color you can give the dropdown the bg-primary class to give it the primary color background (https://getbootstrap.com/docs/4.0/utilities/colors/#background-color)
It's possible your going to have to assign this class to all the ul items individually
Change the styling of the .dropdown-menu class in your style sheet in bootstrap 4.1.3.
Related
I´m trying to add active style in buttons when the routes matches.
The dropdown menu elements add active style properly but parent element does not have this style.
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<li>
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false">{{'entity' |
translate}} <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/listado']"><i class="fa fa-list"></i> {{'list' | translate}}</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLink]="['/entidad/formulario']"><i class="fa fa-plus"></i> {{'new' | translate}}</a></li>
</ul>
</li>
<li>
</ul>
</div>
So the question is: How can i add active element in parent
{{'entity' | translate}} <span class="caret"></span>
when ul dropdown menu elements is selected?
You could try using the isActive method of the router:
https://angular.io/api/router/Router#isActive
To apply the active class to your parent <a> tag when either of the dropdown menu's routes are active, you could add a [class.active] attribute, as such:
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)"
So on your parent element, it would look like this:
<a href="#" class="navbar-brand" data-toggle="dropdown" role="button" aria-expanded="false"
[class.active]="router.isActive('/entidad/listado', true) || router.isActive('/entidad/formulario', true)">
{{'entity' | translate}} <span class="caret"></span>
</a>
I'm working with Bootstrap 4 dropdown and there are about 18 dropdown items.
Because the height is too much, popper.js automatically moves the dropdown away from its original position to the top of the screen. How do I prevent this?
I always want the dropdown to appear right below the button that toggles it.
Thanks
Posting code as requested - ( I'm using C# but the code should convey the point I'm hoping)
<div class="dropdown">
<span class="p-2 text-uppercase font-weight-semi-bold pointer dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
#topMenu.Name
</span>
<div class="dropdown-menu" style="font-size:0.9rem" aria-labelledby="dropdownMenuButton">
#foreach (var subMenu in topMenu.SubMenu)
{
<a class="dropdown-item" href="#Url.Content("~/" + subMenu.Url)">#subMenu.Name</a>
}
</div>
</div>
Bootstrap 4.1
There is a new "display" option that disables popper.js dropdown positioning. Use data-display="static" to prevent popper.js from dynamically changing the dropdown position...
Bootstrap 4.0
There are some issues with popper.js and positioning.
I've found the solution is to position-relative the .dropdown, and set it as the data-boundary="" option in the dropdown toggle:
https://www.codeply.com/go/zZJwAuwC5s
<div class="dropdown position-relative" id="dd">
<button type="button" data-boundary="dd" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 1</a>
...
</div>
</div>
The boundary is set to the id of the dropdown. Read more about data-boundary.
Related questions:
Bootstrap 4: Why popover inside scrollable dropdown doesn't show?
Scrolling a dropdown in a modal in Bootstrap4
I achieved this in Bootstrap 4.3.1 by adding data-flip="false" to the dropdown element.
ex:
dropdown
ZimSystems got it almost right in Bootstrap 4.1. To disable the dropdown changing direction while open, aka. it's x-placement="bottom-end", you should use the "flip" option, instead of the "display" option.
Display static disables the positioning entirely, while flip only disables the LIVE checks, that flip the dropdown upside down, when you scroll towards the top of the screen.
In options, you can try to change dropupAuto : true to dropupAuto : false.
https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version
Im using the bootstrap navbar and its working fine, on mobile devices the toggle button appears and when this button is clicked it appears a dropdown with the correct menu items, just like the bootstrap default.
But i want also to have a menu item with the username that appears when a user has a session started, and when this menu item is clicked it appears also a dropdown menu with the items available to a user with a session initiated.
The menu items available to a user with a session initiated are:
<ul>
<li>Edit Profile</li>
<li>Logout</li>
</ul>
Do you know how to use the bootstrap to create that dropdown menu with the above items for the user with a session start? So that when the menu item "Jan" is clicked apperas a dropdown menu with the items above using the bootstrap styles just like when the toggle button in mobile device is clicked it appears the dropdown with the menu items?
Working example wihout that part of show the dropdown menu items available for a user with a session initiated working properly: https://jsfiddle.net/eeeoft8n/3/
Please see the bootstrap docs, there are some great examples there.
you'll want to add the add the div with the dropdown-menu class and the necessary aria-toggle on the link to activate them.
.menu_container {
position: relative;
width: 100%;
}
div.dropdown-menu{
left:auto;
right:0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<div class="container-fluid px-0">
<nav class="navbar navbar-expand-md navbar-light">
Logo
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu_container">
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto d-flex align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="#">Item 0</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-user" aria-hidden="true"></i> Jan
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">Edit Profile</a>
<a class="dropdown-item" href="#">Delete brains</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">logout</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
you might need to go fullscreen in order to get the full-width view instead of the mobile view
I'm a beginner and I'm trying to create a navbar on bootstrap 4 that changes it's display on a mobile device
On a full-width display, I want the
Logo (left aligned)
Links (left aligned)
Profile picture dropdown menu (right aligned)
On a tablet display, I want the
Logo (centred)
Links (left-aligned and collapsed into hamburger menu)
Profile picture dropdown menu (right aligned) - essentially unchanged
I have managed to achieve most of what I want, except when clicking the hamburger menu, the profile picture menu gets pushed down, which is not what I want.
https://www.bootply.com/6a0BWZivYL
My question is, how do I fix the profile picture dropdown menu to the right-side.
I have tried moving the code for navbar-collapse collapse after the profile picture, which works for when in tablet display, but produces undesirable results in full-width display. Namely that it is no longer right-aligned.
I haven't been able to find any specific examples of this online. The closest I have found https://bootsnipp.com/snippets/gmQR0. This difference is that I don't think I need two collapsible menus, just the 1 collapsible + 1 fixed dropdown menu.
In the given design you have kept profile UL below the button div navigation list.
Please place it before button and change the class from float-md-right to float-right.
Add float-left class to button to make alignment left.
Edit
First design the nav-bar for small screen, then add media queries for dropdown-link to float right.
<head>
<style>
#media(min-width:769px){
.drop-class{
position: absolute;
right: 20px;
}
}
</style>
</head>
<body>
<div>
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-
toggle="collapse" data-target="#navbarNavDropdown" aria-
controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="dropdown drop-class">
<a class="dropdown-toggle" href="#"
id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu"
aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another
action</a>
<a class="dropdown-item" href="#">Something else
here</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
Upon clicking the 'Gmail' (with arrow next to it), menu options such as 'Contacts', 'Tasks' show up.
Is there a similar component in bootstrap? or any other plugin to achieve the same?
Are you thinking of something like this? http://cdpn.io/BqHfm
It's based on the Bootstrap Dropdown
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Mail <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Mail</li>
<li>Contacts</li>
<li>Tasks</li>
</ul>
</div>
Good luck!