The image clearly depicts what i meant
I am trying to shift it inside the navbar when using small screen but its not working.
Boostrap provides responsive menu alignment with the documentation. By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. To use responsive alignment, disable dynamic positioning by adding the data-bs-display="static" attribute and use the responsive variation classes.
Ex for small screen:
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
Left-aligned but right aligned when small screen
</button>
<ul class="dropdown-menu dropdown-menu-sm-end">
<li><button class="dropdown-item" type="button">Action</button></li>
<li><button class="dropdown-item" type="button">Another action</button></li>
<li><button class="dropdown-item" type="button">Something else here</button></li>
</ul>
</div>
Other breakpoints .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-end.
Related
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.
I am having an issue with the DropdownButton and I have no idea why the hover effect is longer than the actual size of the dropdown menu.
My DropdownButton is inside a Telerik Grid which may cause the problem. For the sake of simplicity I will attatch a screenshot and how I implement the DropdownButton. It would be way too much and too hard to understand if I post my entire Grid that I am using.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
As you can see is the hover effect too long:
I don't think it is related to the code that you posted. There must be something overwrite the default Bootstrap hover effect.
Try to add the below:
.dropdown-item:focus, .dropdown-item:hover{
width: 100%;
}
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>
i use bootstrap 3 and i try to display a button group with a submenu.
i use bootstrap-submenu
i created the menu
http://jsfiddle.net/L8kbaqw3/
<div class="btn-group">
<button class="btn btn-primary" type="button">Actions</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a tabindex="0">Annuler</a></li>
<li><a tabindex="0">Sauvegarder</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="0">Payer</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Comptant</a></li>
<li><a tabindex="0">Débit</a></li>
<li><a tabindex="0">Carte de crédit</a></li>
<li><a tabindex="0">Carte cadeaux</a></li>
<li><a tabindex="0">Chèque</a></li>
</ul>
</li>
</ul>
</div>
</div>
that work fine.
but when i try to add something under it, i don't see all the menu
http://jsfiddle.net/hxnznnz6/
it's seem like something block it to display completly the menu.
Also if you compare the layout of the two button, it's different
Edit
i removed the first btn-group like #Eduardo Arruda Pimentel said.
look ok, but the sub menu of Payer is not displayed when i click on it
New result
http://jsfiddle.net/wn9u5z28/
1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:
Bootstrap 3 dropdown sub menu missing
Responsive multilevel menu with Bootstrap 3
2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:
class="btn-group"
In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class like <ul class="dropdown-menu pull-left" role="menu"> with my code, but it doesn't work. anyone has an idea how to do this ?
Here is my code
<!-- Static navbar -->
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li><a id="Home" href="index.html">Home</a></li>
<!-- Visa drapdown-->
<li class="dropdown">
My Menu <span class="caret"></span>
<ul class="dropdown-menu pull-left" role="menu">
<li>Menu Item 01</li>
<li>Menu Item 01</li>
<li>Menu Item 02</li>
<li>Menu Item 03</li>
<li>Menu Item 04</li>
<li></li>
</ul>
</li>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
for Twitter Bootstrap 3
<div class="dropdown-menu pull-right">
<!-- write your code here -->
</div>
hope it helps :)
For Bootstrap 3.1.0 or above use .dropdown-menu-left or .dropdown-menu-right to display the drop down menus right or left side of the parent menu. In your case try following.
<li class="dropdown">
My Menu <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-left" role="menu">
<!-- write your code here -->
</ul>
</li>
Bootstrap is BEST
Adding this style element to the dropdown <ul> will align the dropdown to the left side of the menu item:
left:0;
See this Bootply which targets the .dropdown-menu.pull-left and adds a left:0;.
This should solve your problem.
Update
I see that Bootstrap has deprecated pull-right and pull-left as of Bootstrap 3.1.0. Use dropdown-menu-left class to use built-in Bootstrap css to align the dropdown on the left edge so you don't need extra CSS. See this updated Bootply
As the answers given above are too old, would like to provide working solution for Bootstrap 3.3.7.
Use the given css on your .dropdown-menu div :
.dropdown-left-manual {
right: 0;
left: auto;
padding-left: 1px;
padding-right: 1px;
}
Explaination :
"right:0;" to make then ending of menu inline with end of dropdown
button.
"left:auto;" to override the left:0 given in dropdown-menu
class by bootstrap.
paddings are used to correct hovers on menu item, can be ignored.
Change navbar-right to navbar-left and add a pull-right class to the UL.
<ul class="nav navbar-nav navbar-left text-uppercase pull-right">
Check out the JSfiddle for an example.
http://jsfiddle.net/eqcpLj6k/1/
For Bootstrap 4:
There are CSS classes named: .dropup, .dropright and .dropleft.
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
Source: Bootstrap
For a dropdown item that has been floated to the right of the screen, with its dropdown content flowing over the screen, just add the below code to prevent the content of the dropdown from flowing over the screen.
right: 0;