Bootstrap 4 display dropdown submenu on the right side
Add left to the dropdown menu whose position you want to change. like shown below
.dropdown-menu.show.abc {
left: 95%;
}
.dropdown-menu.show.abc { left: 95%; top: 20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-custom navbar-expand-md bg-dark navbar-dark">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="collapse_target">
<ul class="navbar-nav"> <li class="nav-item dropdown"> <a class="nav-link" data-toggle="dropdown" data-target="#dropdown_target" href="#"> DEPARTMENTS </a> <ul class="dropdown-menu abc" aria-labelledby="dropdown_target">
<li class="dropdown-item dropdown"> <a data-toggle="dropdown" data-target="#auto_en" href="#">Automobile Engineering</a> <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="auto_en"> <li class="dropdown-item"><a href="#">HOD's Desk</a> </li> <li class="dropdown-item"><a href="#">About Us</a></li> <li class="dropdown-item"><a href="#">Faculty</a></li> <li class="dropdown-item"><a href="#">Events</a></li> <li class="dropdown-item"><a href="#">Class Timetable</a></li> <li class="dropdown-item"><a href="#">Results</a></li> </ul> </li> </ul> </li> </ul> </div></nav>
How to pull dropdown submenu to the left side in Bootsrap 4
The issue you are having is because you have set left: 100%
on .dropdown-submenu .dropdown-menu
so when you add the .dropleft
class it is being overridden by the left:100%
remove this and it should work ok; please see below: https://jsfiddle.net/fdm6zer9/
Bootstrap 4: Dropdown menu is going off to the right of the screen
Bootstrap has this built in already: See Menu Alignment. Just add the dropdown-menu-right
class to the dropdown-menu
div.
<div class="dropdown-menu dropdown-menu-right">
Working Example: (open Full Page)
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-xl navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Company</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form action="#" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
<input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
</form>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a href="#" class="nav-link active">
<strong>Post Job</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Register</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Profile</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>My Jobs</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>My Searches</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Employer Dashboard</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Login</strong>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<strong>Logout</strong>
</a>
</li>
</ul>
<ul class="navbar-nav">
<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">
<strong>Account</strong>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item">
<strong>Register</strong>
</a>
<a href="#" class="dropdown-item">
<strong>Profile</strong>
</a>
<a href="#" class="dropdown-item">
<strong>My Jobs</strong>
</a>
<a href="#" class="dropdown-item">
<strong>My Searches</strong>
</a>
<a href="#" class="dropdown-item">
<strong>Employer Dashboard</strong>
</a>
<a href="#" class="dropdown-item">
<strong>Login</strong>
</a>
<a href="#" class="dropdown-item">
<div class="dropdown-divider"></div>
<strong>Logout</strong>
</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.2/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
Bootstrap Navbar Dropdown Menu Items Right
Bootstrap 5 (update 2021)
Use the dropdown-menu-end
class on the dropdown-menu
to align the items inside the menu right..
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
</div>
https://codeply.com/p/kWLLKdjdpC
Bootstrap 4 (original answer)
Use the dropdown-menu-right
class to align the items inside the menu right..
<div class="dropdown-menu dropdown-menu-right text-right">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Link</a>
</div>
http://codeply.com/go/6Mf9aK0P8G
Bootstrap: Position of dropdown menu relative to navbar item
This is the effect that we're trying to achieve:
The classes that need to be applied changed with the release of Bootstrap 3.1.0 and again with the release of Bootstrap 4. If one of the below solutions doesn't seem to be working double check the version number of Bootstrap that you're importing and try a different one.
Before v3.1.0
You can use the pull-right
class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu pull-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/ewzafdju/
After v3.1.0
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.
You can use the dropdown-right
class to line the right hand side of the menu up with the caret:
<li class="dropdown">
<a class="dropdown-toggle" href="#">Link</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>...</li>
</ul>
</li>
Fiddle: http://jsfiddle.net/joeczucha/1nrLafxc/
Bootstrap 4The class for Bootstrap 4 are the same as Bootstrap > 3.1.0, just watch out as the rest of the surrounding markup has changed a little:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">...</a>
</div>
</li>
Fiddle: https://jsfiddle.net/joeczucha/f8h2tLoc/
Bootstrap 5Again, very similar for Bootstrap 5 except now it's dropdown-menu-end
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#">
Link
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">...</a>
</div>
</li>
Fiddle: https://jsfiddle.net/joeczucha/psnz2u36/
Multilevel Navbar on Bootstrap 4 (Bootswatch) on right side
You need to adjust the left
position of the submenus...
.dropdown-submenu>.dropdown-menu {
top: 0;
left: -10rem; /* 10rem is the min-width of dropdown-menu */
position: relative;
}
Bootstrap 4 Dropdown Submenus Right
Related: Bootstrap dropdown sub menu missing
Bootstrap: How do you open all the submenus to left side in Dropdown 4 and 5?
If I understand right you can add following lines the css class:
left: auto;
right: 100%;
margin-left: 0;
margin-right: -1px;
The css class must be like this:
.dropdown-submenu>.dropdown-menu{ top:0; left: auto; right: 100%; margin-left: 0; margin-right: -1px; margin-top:-6px; -webkit-border-radius:0 6px 6px 6px; -moz-border-radius:0 6px 6px 6px; border-radius:0 6px 6px 6px;}
Related Topics
Javascript Backslash (\) in Variables Is Causing an Error
How to Get Line Break Within String Interpolation in Angularjs
React Native: Image Not Displaying With Dynamic/Local Uri
How to Get Width of (Dom) Element in Angular2
How to Parse Xml File in React
Howto Trigger Input Event Programmatically on Input Text Field
Rendering a Select Tag on Click - React Js
Laravel - How to Pass a PHP Variable to a JavaScript Function from a Blade File
How to Fetch Url of Current Tab in My Chrome Extension Using JavaScript
Javascript to Download a File from Amazon S3 Bucket
Formdata Created from an Existing Form Seems Empty When I Log It
Reactjs: Expected Onclick Listener to Be a Function, Instead Got Type String
Swiper Slider - Thumbs Gallery With Slidetoclickedslide Do Not Work Properly
How to Post Selected Values Using Ajax
Vuejs Set Active Class, When One Li Element Clicked in V-For Loop