Issue with Bootstrap 5 dropdown menu extending beyond the viewport on the right side

The user dropdown in my code is cut off, even though I'm using Bootstrap 5. I came across an older article on stackoverflow suggesting to add .dropdown-menu-left or .dropdown-menu-right to the </ul>, but that didn't solve the issue for me.

I believe a solution would be to position my dropdown to the bottom left of the User link. Below, I have included the source code, perhaps a bit extensive, but it might be necessary to see the entire nav.

https://i.sstatic.net/I6TCr.png

Notice how the dropdown menu is being cut off to the right.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-lg">
    <a class="navbar-brand" href="{{ url_for('index') }}">
      <img src="../static/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Homepage
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/blog">Blog</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">Username
          </a>
          <ul class="dropdown-menu" aria-labelledby="userDropdown">
            <li><a class="dropdown-item" href="/logout">Log Out</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer №1

left and right have been updated to start and end in Bootstrap 5. Hence..

dropdown-menu-right has now become dropdown-menu-end

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-lg">
    <a class="navbar-brand" href="{{ url_for('index') }}">
      <img src="../static/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Homepage
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" href="/blog">Blog</a>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">Username
          </a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
            <li><a class="dropdown-item" href="/logout">Log Out</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

View Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for invoking the href function in jwplayer with individual arguments

I need assistance with configuring jwplayer to load a list of href links one by one. Each href link includes a function that needs to be triggered automatically with specific parameters passed to JavaScript. Below is the code snippet I am currently worki ...

Transferring data between Jade templates

In the process of building a compact CMS system prior to diving into Node.js websites using Express, Jade, and Bootstrap, I encountered a minor setback. To enhance modularity, I am employing includes for various components like the navigation header on th ...

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

Tips for refraining from transmitting visuals to cell phones in a more meaningful way

Typically when working on responsive or mobile-first design, media queries are utilized to deliver different CSS styles based on screen size. An optimal design strategy may involve not including any images in the default (small) resolution layout. While ...

After the main page is loaded, the div will be dynamically populated with HTML content. How can we confirm that it has finished

I recently took over a project where a page loads and then code attached to that page populates a div with dynamically generated html – essentially filling an existing div with a string of html elements. Within this string are links to images, among oth ...

CSS grid challenges on a massive scale

My CSS grid timeline is currently generating around 1300 divs, causing performance issues. Is there a way to style or interact with the empty nodes without rendering all of them? I also want each cell to be clickable and change color on hover. Any suggest ...

A preselected default option determined by your geographical location in an HTML document

After searching extensively for a solution, I've found this to be quite challenging... In my website's HTML page, there is a dropdown menu containing all the countries. <option value="AF">Afghanistan</option> <option value="AX"&g ...

CSS Flexbox: Dealing with Overlapping Flex Items on Narrow Screens

Hey there! I've successfully created a custom timeline using flexbox, but I'm encountering an issue on smaller screens. As the window size decreases, the flex items start to overlap. Is there a way you can assist me in adding some space without d ...

What's the best way to capture an element screenshot using JavaScript?

I'm working on developing a unique gradient selection application. One of the exciting features I would like to incorporate is the ability for users to save their chosen gradients as digital images (.jpg format) directly onto their computers. When the ...

The insider's guide to understanding the inner workings of the :nth-child() property

I am finding the :nth-child() property to be a bit confusing. Sometimes it takes arguments like :nth-child(2),:nth-child(2n),:nth-child(2n + 1). I'm not sure what these mean exactly - are they referring to even or odd divs, or is there another propert ...

Exploring AngularJS: Retrieving a list of filenames from a specified directory

In the public directory of my application, there is a folder named 'x'. I have the path name to the folder (/path/to/dir/x) but I am unsure of the names of the files within it. How can I retrieve the file names and provide URL links to them in an ...

What are the steps to creating a webpage with scrolling in HTML?

Essentially, I have a question that may sound similar to others, but please hear me out. What I am looking for is the ability to have one photo fixed in place while being able to scroll within it. To provide a better understanding, here is an example: www. ...

Using CSS3 to target the final <li> element within the main list in a nested <ul> structure

I have a complex list structure: <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li> <ul> <li>Nested Item</li> <li>Nested Item</li> <li>L ...

Row within table extending beyond boundaries of parent div table

Is there a way to make a table row wider than its parent table? I want the button at the bottom to extend beyond the borders of the table. https://i.sstatic.net/VH0HP.png Do I need to abandon the table styling to achieve this effect? Check out this JsF ...

Ways to halt a script entirely once its tag has been eliminated

I have a script from a page tracker website that runs periodically. Occasionally I need to restart the script from the beginning. To do this, I typically remove the script tag from the DOM and then re-append it. However, because the script utilizes setInt ...

Issues with iOS 7's absolute positioning not functioning properly within a table-responsive container

I successfully implemented fixing the first two left columns in my tables by following the instructions on . The columns are only fixed when the screen size is less than 768px, making the table scrollable (check it out on jsFiddle). This functionality work ...

Showing Information in an HTML Table

I am new to the world of PHP programming and constantly searching for solutions to my problems. If anyone has any ideas, please share them - I greatly appreciate any help in solving this issue. Within my database table, I have data structured as follows: ...

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

JavaScript program that continuously reads and retrieves the most recent data from a dynamically updating JSON file at regular intervals of every few seconds

I am a beginner in JavaScript and I'm facing an issue with displaying the most recent values from a .json file on an HTML page. The file is updated every 10 seconds, and I am also reading it every 10 seconds, but I'm not getting the latest data. ...

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...