Issue with Bootstrap 4: Dropdown menu extends beyond the edge of the screen towards the right side

I'm having trouble with the dropdown items extending off the page. I've tried a few solutions from BS3 but they don't seem to be working for me. I suspect it might have something to do with the ml-auto class. (please disregard the if-else statements)

You can view the code on CodePen.

<div class="container-fluid">
  <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse" style="background-color: #3c763d!important;">

    <button class="navbar-toggler navbar-toggler-right navbar-toggler-custom" type="button" data-toggle="collapse" data-target="#searchNav" aria-controls="searchav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div id="logo">
      <a class="navbar-brand" href="/">Company</a>
    </div>

    <div class="collapse navbar-collapse" id="searchNav">
      <ul class="navbar-nav mx-auto">
        <form action="/search" class="form-inline">
          <input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
          <input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
          <button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
        </form>
      </ul>
    </div>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"><a href="/post" class="nav-link"><strong>Post Job</strong></a></li>

        <!-- Dropdown menu for account -->
        <li class="nav-item dropdown hidden-md-down">
          <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <strong>Account</strong>
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
            <a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
            <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
            <a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
            <a v-if="user_logged" href="/logout" class="dropdown-item"><strong>Logout</strong></a>
          </div>
        </li>

        <!-- Mobile version of dropdown menu for account -->
        <div class="hidden-lg-up">
          <!-- Please see CodePen link above for if-else statements in this section -->
        </div>

      </ul>
    </div>
  </nav>
</div>
twitter-bootstrapcssbootstrap-4

Answer №1

Bootstrap has a pre-existing feature for this

To achieve menu alignment in Bootstrap 4, refer to Menu Alignment. Just include the dropdown-menu-right class within the dropdown-menu div.

<div class="dropdown-menu dropdown-menu-right">

Check out this working example: (open Full Page)

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-xl navbar-dark bg-primary">

  <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>

  <a class="navbar-brand" href="#">Company</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <form action="#" class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" id="keyword" name="keyword" :value='keyword' type="text" placeholder="Search for jobs" />
      <input class="form-control mr-sm-2" id="location" name="location" :value='location' type="text" placeholder="Location" />
      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Find Jobs</button>
    </form>

    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a href="#" class="nav-link active">
          <strong>Post Job</strong>
        </a>
      </li>
      
      [Additional content omitted for brevity]
      
    </ul>

    <ul class="navbar-nav">
      <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">
          <strong>Account</strong>
        </a>
        
        [Additional content omitted for brevity]

    </ul>
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.slim.js"></script>
<script src="hhttps://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>

In Bootstrap 5, you can accomplish menu alignment by referring to Menu Alignment. Simply apply the dropdown-menu-end class to the dropdown-menu div.

<div class="dropdown-menu dropdown-menu-end">

Check out this working example: (open Full Page)

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">

    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="SupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
    
    [Additional content omitted for brevity]
  
  </div>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.8/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/js/bootstrap.min.js"></script>

Answer №2

For Bootstrap 5 (beta 2), the new feature dropdown-menu-end is available:

<div class="dropdown-menu dropdown-menu-end">
  ...
</div>

Answer №3

If you're using React and come across this problem while searching online, the solution provided in the accepted answer may not work for you. When manually adding 'dropdown-menu-right' to the className in React, it gets ignored. Instead, make sure to update your code as shown below to apply the correct class.

For JavaScript

<DropdownMenu right>

For TypeScript

<DropdownMenu right={true}>

I'm sharing this information here because I faced the same issue while searching online. It took me some time to find the right solution for implementing Bootstrap 4 in React (reactstrap).

Answer №4

Edit your stylesheet by replacing the left: 0; with right: 0; for the class .dropdown-menu.

Answer №5

Upon reviewing your code, I noticed that the current solution provided addresses a different issue. The reason why the menu shifts to the left or right of the page instead of being positioned under the button is due to the absence of the parent class .btn-group. Additionally, it seems like the .dropdown-toggle and .dropdown-menu classes are applied to incorrect elements. To rectify this, you can refer to the following basic example from the Bootstrap 4 documentation.

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

I have only reviewed a portion of your code, but I want to highlight the area where a dropdown for large screens is present.

 <li class="nav-item dropdown"> <!--- change this line --->
            <a class="nav-link dropdown-toggle" href="/" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <strong>Account</strong>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/signup" class="dropdown-item"><strong>Register</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'user'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'user'" href="/profile" class="dropdown-item"><strong>Profile</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/applied" class="dropdown-item"><strong>My Jobs</strong></a>
              <a v-if="user_logged && user_type === 'user'" href="/searches" class="dropdown-item"><strong>My Searches</strong></a>

              <!-- </li> -->

              <!-- <li v-if="user_logged && user_type === 'company'" class="nav-item"> -->
              <a v-if="user_logged && user_type === 'company'" href="/dashboard" class="dropdown-item"><strong>Employer Dashboard</strong></a>
              <!-- </li> -->

              <!-- <li v-if="!user_logged" class="nav-item"> -->
              <a v-if="!user_logged" href="/login" class="dropdown-item"><strong>Login</strong></a>
              <!-- </li> -->

              <!-- <li v-if="user_logged" class="nav-item"> -->
              <a v-if="user_logged" href="/logout" class="dropdown-item">
                <div class="dropdown-divider"></div>
                <strong>Logout</strong>
              </a>
              <!-- </li> -->
            </div>

          </li>

Make sure to update the parent class to btn-group as shown in the corrected code snippet above.

Answer №6

Bootstrap 4

If you are working with LTR (Left To Right) languages like English or Spanish, you can easily align your dropdown menu to the right using the built-in class dropdown-menu-right along with dropdown-menu.

<li class="nav-item dropdown">
    ...
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item active" href="#">English</a>
      <a class="dropdown-item" href="#">Arabic</a>
      <a class="dropdown-item" href="#">Himyaritic</a>
    </div>
</li>

On the other hand, if you are dealing with RTL (Right To Left) languages such as Arabic or Hebrew:

  1. You need to create a new class, for example: dropdown-menu-left
  2. Then use it in this way: 
    <div class="dropdown-menu dropdown-menu-left">
  3. Lastly, add the following CSS rules to your stylesheet:
.dropdown-menu-left {
    right: auto;
    left: 0;
}

Answer №7

Bootstrap 5 offers various ways to customize the dropdown menu, including options like switching it to dropleft and dropright orientations. For more detailed information, you can refer to the official documentation here.

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

Having trouble locating the Nativescript-theme-core file for your Nativescript application?

I'm currently working on a basic barcode scanner app and encountering an unusual error once the app is deployed to a Genymotion emulator. It appears to be searching for the core theme in the incorrect location. Any thoughts on why this issue is occurr ...

cssangularnativescript

The presence of text is leading to CSS placement troubles

I operate a website dedicated to comic content and am looking to incorporate text (retrieved from the database field "description") beneath each comic thumbnail. Here are my two inquiries: 1) I'm facing an issue where adding text below a comic caus ...

phpcss

Is there a way to adjust the title length so that it can change dynamically?

https://i.sstatic.net/Tu9QM.pngCurrently, the title has a fixed background color which may widen if the resolution is smaller than the original size. My aim is to create a dynamic background color that adjusts based on the resolution. Regardless of wheth ...

htmlcsshighcharts

how to position one div above another using css

I currently have a page layout with 7 different div elements structured like this; <div id="container"> <div id="head"></div> <div id="A"> <div id="A1">A1</div> <div id="A2"></div> ...

css

What is the best approach to define a *.css file in an ASP.NET UserControl?

I am dealing with a CSS file which includes all of the <style> tags used in my website. Is there a way I can connect this CSS file to my UserControl, allowing me to utilize the styles within the CssClass attributes for my child controls? ...

.netasp.netcssuser-controlsstylesheet

Attempting to recreate the dynamic banner featured in the video

Looking to replicate a setup similar to what was demonstrated in the video. I have two div blocks - one with a random image and the other with a video, and I want them to be as flexible and identical as possible to the video layout. How should I go about a ...

javascripthtmlcssweb

Creating a visually striking layout with Bootstrap card columns masonry effect by seamlessly adjusting card heights to prevent any

When using the bootstrap card columns masonry and a user clicks on a button inside a card, the height of the card changes dynamically by adding a card-footer. However, in certain situations, the cards change position causing a jumpy effect. To see this i ...

javascriptjqueryhtmlcssbootstrap-4

Maintaining CSS elements in position

Hello everyone, I have a project at work where I need to create a map with specific cities pinpointed. I've completed it on my computer and now I'm trying to ensure that when I transfer it to another device, like a laptop, the points remain in t ...

htmlcss

Allowing the primary content to span the entire width of the mobile screen

I have scoured various forums in search of answers, but unfortunately, I haven't found a solution that fits my specific query. I am looking to ensure that the .main-content (article text and images) occupies the full width of the mobile screen without ...

javascripthtmlcssmobileresponsive

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

jquerycss

Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important ...

javascriptjquerycss

The design of the Bootstrap alert button is not working properly as it fails to close when clicked on

While experimenting with Bootstrap, I encountered an issue with the bootstrap alert button that seems to be malfunctioning. I simply copied the code from Bootstrap's official website: https://i.sstatic.net/DRLIg.png However, upon testing it on my pag ...

htmlcssbootstrap-modalbootstrap-5

Shade the entire td column in different colors depending on the characteristics of th

I am working with a table and here is the code for it: <table> <thead> <tr> <th style="width: 40%; text-align: center; vertical-align: center;">Nr.<br> crt.</th> <th style="font-weight: bold; wi ...

javascripthtmljquerycsslaravel

Crafting a stylish vertical timeline using Tailwind and CSS: Step-by-step guide

I am attempting to design a timeline for a react app where odd children are displayed on the left side of the timeline and even children on the right side. Here is an image for reference: https://i.sstatic.net/YnNFU.png The issue I am facing is that I am ...

cssreactjstailwind-csstailwind-in-js

Tips on incorporating toggle css classes on an element with a click event?

When working with Angular typescript instead of $scope, I am having trouble finding examples that don't involve $scope or JQuery. My goal is to create a clickable ellipsis that, when clicked, removes the overflow and text-overflow properties of a spec ...

cssangularjstypescript

Angular background image not displayed

After searching extensively, I came across many examples that didn't work for me. I'm not sure what I'm doing wrong and I need assistance! I noticed that I can see the image if I use the <img> tag, but not when I try to set it as a ba ...

cssangulartypescriptsanitize

Utilizing SASS with Bootstrap 4 media breakpoints: A comprehensive guide

According to the information provided on the official Bootstrap website: Bootstrap writes its source CSS in Sass, making all media queries available via Sass mixins: @include media-breakpoint-up(xs) { ... } @include media-breakpoint-up(sm) { ... } @in ...

htmlcsstwitter-bootstrapsassbootstrap-4

Choosing Issues

My selectpicker is displaying data outside the dropdown menu before making a selection. The data appears both inside and outside of the dropdown. Can someone please help me identify the issue and guide me on how to fix it? <select class="selectpick ...

javascriptphphtmljquerycss

What could be causing the multiselect to fail to update?

Currently, I am having an issue with bsMultiselect and bootstrap 5. Despite having all the required scripts in place, the multiselect element only updates after a page reload. The goal is to have the multiselect updated when an option in another select e ...

bootstrap-4multi-selectbootstrap-5bsmultiselect

How can I use CSS to transform a "+" symbol to an "x"?

When I created an accordion using HTML, JS, and CSS, I encountered a problem. The "+" sign in the accordion does not rotate correctly as it should. Instead of rotating from the middle of the "+" sign, it rotates from the top. This is my HTML code: <di ...

jqueryhtmlcss