Design flaws occur in Bootstrap Navbar dropdowns when the screen size is reduced

I am experiencing an issue with this JS Fiddle https://jsfiddle.net/uvkt8z7j/16/ where the design gets distorted when I click on the dropdown menu while the screen is small. I want to maintain the same behavior as when the screen is large.

<body style="background-color: black;">
  <div id='header'>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>

      <ul class='navbar-nav'>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <img src="https://png.icons8.com/ios/24/black/dining-room-filled.png">
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
      </ul>

      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link menu-selection" href="#">STORE ORDER ONLINE <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link menu-selection" href="#">STORE INFO</a>
          </li>
          <li class="nav-item">
            <a class="nav-link menu-selection" href="#">STORE LOCATORS</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</body>
htmlcssbootstrap-4

Answer №1

To resolve this issue, you have the option to override the bootstrap class specifically for smaller screens. Take a look at the media query provided in the demo below:

@media screen and (max-width: 992px){
    #header .dropdown-menu{
        position: absolute;
        right: 0;
        left: auto;
    }
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<body style="background-color: black;">
    <div id='header'>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        <ul class='navbar-nav'>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <!-- <div>Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div> -->
                            <img src="https://png.icons8.com/ios/24/black/dining-room-filled.png">
                    </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>

        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link menu-selection" href="#">STORE ORDER ONLINE <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link menu-selection" href="#">STORE INFO</a>
            </li>
            <li class="nav-item">
              <a class="nav-link menu-selection" href="#">STORE LOCATORS</a>
            </li>
          </ul>
        </div>
      </nav>
    </div>
  </body>

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

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

javascriptcssflashinternet-explorerxhtml

Executing operations on checkboxes on a webpage without access to model files

I am facing an issue with accessing the models file due to encryption in the software. Currently, my checkboxes are implemented using Ajax within a PHP query. Since it is Ajax-based, I am unable to manipulate actions through the URL. My goal is to extract ...

javascriptphphtml

Is it possible to utilize nth-child() without recursion?

Can the CSS selector parent child:nth-child() be used to target only children? The HTML code is as follows: <body> <div>div 1</div> <div> div 2 <div>div 2.1</div> <div>div 2.2</ ...

htmlcss

Uploading Multiple Files Using HTML5 and AJAX

I recently stumbled upon this simple plain JavaScript AJAX upload code (apparently jQuery's $.post doesn't work properly with HTML5 for some reason), /* If you want to upload only a file along with arbitrary data that is not in the fo ...

jqueryajaxhtmlfile-upload

The div element continuously wraps its content when the browser size is reduced

Is there a way to prevent a div from wrapping or shifting below when resizing the browser to the left? I want this specific box to remain fixed in its position, causing the user to use the horizontal scroll bar to view it while everything else on the pag ...

htmlcss

Using Vue to alter data through mutations

Greetings! I am currently in the process of developing a website for storing recipes, but as this is my first project, I am facing a challenge with modifying user input data. My goal is to create a system where each new recipe added by a user generates a u ...

javascripthtmlcssvue.jsvuex

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

cssajaxsymfonymodal-dialogmaterialize

Stylish News Carousel using CSS and HTML

I've been working on creating a news slider for my website, but I'm encountering an issue. Despite completing the HTML and CSS, I'm struggling to make the 'showcase' rotate using JQuery. I've tried various guides and instructi ...

jqueryhtmlcss

Generate a table inside a bootbox dialog using the data retrieved from an ajax call

I'm currently working on an app that requires attendance to be reported for specific events. I retrieve a list of JSON objects using AJAX. My goal is to create a table within a bootbox dialog that generates new rows for each item in the result from m ...

c#jqueryhtmlajaxbootbox

How can I display two slides at once in Ionic 2/3 on a wide screen?

I have been searching for a solution that will allow me to display 1 ion-slide if the device screen is small, but if it's larger, then I want to display 2 ion-slides. Unfortunately, I have not been able to find a suitable solution yet. As an example, ...

javascripthtmltypescriptionic2ionic3

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js

How can I align two tags horizontally using HTML and CSS?

I've been diving into HTML and CSS lately and making some progress, but I've hit a snag. I'm trying to create a horizontal ul list with li elements on the same line at the top of the screen, similar to Stack Overflow's layout. Although ...

htmlcss

Firefox compatibility issue: Bootstrap modal button not functioning properly when wrapping other HTML elements

Hey everyone, I've come up with some awesome image hover effects that you can use. I've implemented bootstrap modals so that when you click on 'show code', a pop-up will display with the HTML and CSS codes for easy copy-pasting. However ...

htmlcsstwitter-bootstrap

incorporating a timer into a JavaScript game

I am currently working on a memory card game where I want to include a stopwatch feature. I'm looking to display the time elapsed from when the user selects the first card until they win. However, I am struggling with keeping the stopwatch running smo ...

javascripthtml

Tips for arranging HTML image sources to prepare for future updates

Incorporated into the HTML are a series of images, each accompanied by text and/or transitions. To streamline positioning, each image set along with other elements (text, video, etc...) is enclosed within a div. Furthermore, every image is labeled with a n ...

htmlcss

CSS causing black bars to appear when image is moved

I recently started working with HTML/CSS and JS, but I've encountered a small issue. I'm using the bootstrap carousel and it's functioning well, but when I try to move the image higher up, black bars appear at the bottom as if my images are ...

htmlcssbootstrap-5carousel

The Forward and Back Buttons respond based on the current position of the caret

Exploring the concept of a Keypad-Login. I am trying to create Back and Forward buttons. However, the back and forward buttons are currently inserting the letters at the end of the input value instead of at the caret position. The input field is disabled, ...

javascripthtmlbuttoninputonclick

Storing JavaScript Array for Future Use in a Separate File

Trying to clarify my question: I'm working with two files: number-crunching.js and chart.html. The number-crunching.js file contains a JSON object: var data = [ { "mother": "Ellen", "father": "Bob", "pet": "cat", "age":50, "hairLength":10 ...

javascriptjqueryhtmlarraysjson

Assign a unique HTML attribute to a child element within a Material-UI component

Currently, I am trying to include the custom HTML5 attribute "data-metrics" in the span element within the ListItemText Material UI component. However, I am facing some difficulty achieving this as per the specifications outlined in the Component API Docum ...

javascripthtmlreactjsmaterial-ui

Troubleshooting issue with RadioButton check change not updating in onPost event in ASP.Net project utilizing Bootstrap HTML and C

Having created two radio buttons, grouped them together, and applied bootstrap classes for styling; I am encountering an issue where the values of the radio buttons are not updating when clicked and submitted. Interestingly, the checkboxes on the same form ...

c#htmlasp.netrazor