How to get dropdown menu to the left, also shows all the time on page load

[mldardy]

I’m trying to get the dropdown menu for the user icon more towards the left instead of how it looks in the screen shot below where it’s off to the right. Also when the page initially loads the dropdown menu shows without a user clicking on it. How do I get that to hide until I hover or click on the user icon. Is this a css element that fixes either of these issues?

[PaulOB]

You removed the class called dropdown-menu which is what the js is looking for to toggle the element.

Your html should be like this:

 <div class="dropdown dropright">
          <a class="nav-link" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="material-icons-person">
              person
            </span>
          </a>

          <div class="dropdown-menu dropdown-menu-person" aria-labelledby="dropdownMenuLink">
            <h4 class="header-person">Profile</h4>
            <div class="person-email" disabled="true">user@user.com</div>
            <a class="dropdown-item" href="#">Logout</a>
          </div>

I added dropright to the parent and dropdown-menu to the element with dropdown-menu-person.

That would have been all you needed to do but because you have styled dropdown-menu-person using !important then not much of the bootstrap css will take effect so you will now need to over-ride your over-ride.

e.g.

.dropright .dropdown-menu{
  left:auto!important;
  right:0!important;
}

That will need to follow your other rules. In essence you didn’t need any of your rules apart from the styling the position was controlled via existing bootstrap css. Only style the differences and refer to the documentation on how to move the menu around.

Dropdowns

Also don’t use !important like that as you will rarely need !important. I’ve used it a couple of times only in about 100 sites. You should instead match specificity with your rules otherwise you get into a situation where every rule has !important and that’s nonsense and pretty useless for maintenance.

[mldardy]

Thank you so much again. Perfect.