What is the best way to ensure the dropdown box in a Bootstrap navbar automatically adjusts its width to fit within the

When I click on the dropdown menu, the box extends beyond the width of the page and a horizontal scroll appears. How can I make the dropdown box automatically adjust its position if it reaches the edge of the page without needing a scroll (as shown in the figure below)?

Demo: https://codepen.io/ramlals/pen/RmoGEx

I am aware that this issue can be resolved by adding a right margin to the dropdown menu, but I want the box to adjust its position automatically. The similar queries I found on Stack Overflow are related to dropdown menu size rather than the dropdown box itself.

Below is an example of my code using Bootstrap navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <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>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <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">
                        Dropdown
                      </a>
                      <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                  </ul>

                </div>
              </nav>

Thank you for your help.

csshtmltwitter-bootstrap

Answer №1

It's simple! You've already used position: absolute on the div element. Now, just add another style to the same element like this:

left: -60px;

Your code will now look like this:

@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    left: -60px;
}

Implementing this change should do the trick!

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

What is the best way to distinguish a particular item in a <select> element and include a delete button for each row using jQuery?

1.) I've set up a nested table and now I want to ensure that when the 'Delete' button within the child table is clicked, its corresponding row gets deleted. 2.) I have a <select> tag. The issue is how can I implement validation to che ...

javascriptjqueryhtml

Chrome now supports clickable circular canvas corners

I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...

javascripthtml5-canvascssclickable

Unusual CSS behavior discovered while implementing horizontal scrolling navbar with overflow-x

I've been working on a navbar that will scroll horizontally when it exceeds the width of its parent container. It features a bottom border with a different color for the active link. Using a negative margin to overlap them works well, but as soon as ...

htmlcss

Continuously update the content within a paragraph using jQuery

After searching for a jQuery animation that would constantly change text within a paragraph, I stumbled upon a solution at this link : Text changing with animation jquery. However, I encountered a challenge as I wanted to include a bootstrap button beneath ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to eliminate unwanted white space at the top of the page?

I'm new to web development and I'm exploring the concept of white space at the top of a webpage. Here is a snippet of my code: HTML: <div> <p>lorem ipsum</P> </div> CSS: div { background-color: black; } I attem ...

htmlcss

What is the best way to delete a table that I created through my programming?

I have utilized the following code to create a table: <html> <head> <title>Table Time</title> </head> <body> <table border="1px"> <tr> ...

htmlhtml-table

Unlocking the ability to retrieve data generated by the context within getServerSideProps beyond its boundaries (for transitioning from Create React App to Next.js)

I am currently utilizing Create React App for my react application but I am in the process of migrating to Next.js. Accessing URL data such as host, protocol, and query parameters has posed a significant challenge. After some trial and error, I realized t ...

htmlreactjstypescriptnext.jsserver-side-rendering

Issues arise when attempting to display Sphinx documentation containing SVG images on Internet Explorer 11

I have been working on building Sphinx documentation and incorporating a UML diagram generated as an SVG image using graphviz. The SVG file is embedded in the auto-generated HTML template from Sphinx. While the SVG displays perfectly fine on Chrome and Fi ...

htmlsvginternet-explorer-11python-sphinxgraphviz

The issue with Thymeleaf recursive function not functioning as expected

I am attempting to create a recursive list using Thymeleaf. I have a simple Java object that represents a node with a description and an array list of child nodes. However, my current HTML/Thymeleaf structure is not properly iterating through the nested le ...

htmlthymeleaf

Reorganizing bootstrap grids for smaller devices such as extra small screens

Below is a snippet of my HTML markup: <div class="row"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12"> Some contents </div> <div class="col-lg-1 col-md-1 col-sm-1 col-xs-12" > Some Content </d ...

htmlcsstwitter-bootstrap-3responsive-design

Issue with updating input value during keyup event in Android Chrome specifically

Check out this straightforward jsfiddle: https://jsfiddle.net/gq9jga4q/33/ <input type="text" id="kbdhook" /> <div id="result" >1: </div> <div id="result2" >2: </div> <div id="result3" >3: </div> $('#kbdh ...

javascriptandroidjqueryhtmlgoogle-chrome

Tips for switching "a" tag elements to reveal concealed DIVs in a similar way to the Facebook notification center

I have a situation in my code where I need to toggle between two a elements to display a hidden div with content one at a time. This functionality is similar to how the Facebook notification center works when you click on the icons, which I'm sure mos ...

jqueryhtmlcss

Code that changes every occurrence of a particular filtered selection of HREF values to a different value

When faced with the limitation in Firefox where links cannot be opened in a new tab if they have a HREF tag diverting to a function, it might be necessary to utilize a script to convert them to an actual HREF. Understanding the functionality of foo: func ...

javascripthtmlhrefgreasemonkey

Can a person select a characteristic like "height" using Javascript?

Is it doable to set a height for an image in CSS, then detect this gradient using JS and double the width based on the height x2.25? Could this be achieved? ...

javascriptcssattributesscale

What are the best practices for avoiding text wrapping around a DIV?

I have scoured this site extensively, searching for a solution to my problem. What I thought was a simple issue has left me frustrated after hours of trying to figure it out on my own. So, I've finally admitted defeat and turned to seek help... Here& ...

htmlcssword-wrap

Tips for creating a full-screen background image using HTML and CSS

I am looking to achieve a full-screen background image using HTML and CSS. I have configured all the necessary properties for the background image. Here is where my background image is located: [![enter image description here][1]][1] I have attempted to ...

htmlcss

Unique content on a web page when it is loaded with HTML

Is there a way to dynamically load various content (such as <img> and <a>) into divs every time a page is loaded? I've seen websites with dynamic or rotating banners that display different content either at set intervals or when the page ...

javascripthtmlajaxrandom

Issue regarding the sidebar's top alignment

Having trouble with the positioning of this sidebar. It seems to be hanging slightly over the top edge instead of aligning perfectly with it. Here's how it looks: enter image description here. CSS CODE: https://pastebin.com/RUmsRkYw HTML CODE: https ...

htmlcssbrowsernavigationsidebar

Troubleshooting problems with forms using Bootstrap and HTML

I could use some assistance with a problem I'm facing while trying to acquire new skills through learning. I would like my picture and forms to resemble the one in this image: enter image description here index.html <div class="jumbotron"> &l ...

htmlcsstwitter-bootstrap