Bootstrap Dropmenu automatically resizes on click-CodePudding

I am building a simple navbar that has a drop-down menu at the far right as shown here:

The problem is that when I click the dropdown the navbar it automatically resizes as shown in the image below and this is not what I want

Here is my navbar code:

<nav >
  <a  href="/dashboard">
    <img
      src="{{ url_for('static', filename='images/logo.png') }}"
      width="30"
      height="30"
      
      alt=""
    />
    App Test
  </a>

  <div>
    <ul  style="padding: 0px">
      <li  style="border: none">
        <a
          
          href="#"
          id="navbarDropdownMenuLink"
          role="button"
          data-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <img
            src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg"
            width="40"
            height="40"
            
          />
        </a>
        <div  aria-labelledby="navbarDropdownMenuLink">
          <a  href="#">Dashboard</a>
          <a  href="#">Edit Profile</a>
          <a  href="#">Log Out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

CodePudding user response：

You forgot to add navbar-expand such as navbar-expand-lg.
As document said:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

And:

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

The .navbar-expand-xx with .dropdown-menu selectors contains position:absolute; which make dropdown menu look float instead of expanding the area.

After add navbar-expand- class, the navbar required flex-grow-1 class on brand element to push menu button to the right. This is Bootstrap's flex utilities.

<nav >
    <a  href="/dashboard">
        <img src="{{ url_for('static', filename='images/logo.png') }}" width="30" height="30"  alt="">
        App Test
    </a>

    <div>
        <ul  style="padding: 0px;">
            <li  style="border: none;">
                <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" >
                </a>
                <div  aria-labelledby="navbarDropdownMenuLink">
                    <a  href="#">Dashboard</a>
                    <a  href="#">Edit Profile</a>
                    <a  href="#">Log Out</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

See it in action.

Now, you may see that the dropdown menu itself is off screen. You can fix this use menu align option.

<div  aria-labelledby="navbarDropdownMenuLink">
    <a  href="#">Dashboard</a>
    <a  href="#">Edit Profile</a>
    <a  href="#">Log Out</a>
</div>

See it in action.