How to adjust dropdown position in bootstrap 4? - html

Question

I want to adjust my dropdown position because on my desktop and in mobile the dropdown not showing properly. It is showing half. Kindly check the image below:
Kindly check my code what I am doing:
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>
My problem is if I add margin-left:30px; then dropdown not visible on mobile. If I add padding-left:30px; same thing happen. In this case padding and margin not working. Also text link also not properly align. And not fixing by margin and padding.
Any idea or suggestion would be welcome.

Answer 1

Please overwrite bootstrap css in your css file.
.dropdown-menu {
left: -90px;
}
Default is left: 0; in Bootstrap.css file. Add negative value what you need.

Answer 2

You'll need to remove the style="margin-left:-50px;" from your dropdown-menu class, and then change ml-auto to mr-auto (margin-left vs margin-right, which is where your menu is defaulting).
Here's a codepen if that works better for you.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 0.15rem"> <!-- style="padding-top: 2.8rem" -->
<a class="navbar-brand" href="index.php">Admin Panel</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
<span class="navbar-toggler-icon"></span>
</button>
<div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.php">My Dashboard</a> <!-- style="color:#007bff;" -->
</li>
</ul>
<ul class="nav navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Hello rimi!</a>
<div class="dropdown-menu" style="margin-left:-50px;">
<a class="dropdown-item" href="sp.php">My Profile</a>
<a class="dropdown-item" href="cp.php">Change Password</a>
<a class="dropdown-item" href="logout.php">Logout</a>
</div>
</li>
</ul>
</div>
</nav>