The Bootstrap 4 navigation bar is failing to extend fully across the width when a dropdown menu

Here is the code I am using for the navigation bar. When I click on the dropdown button, this is how it appears on my webpage: Click here

<nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3">

  <a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px">RYCE</a>
  
  <button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link text-white" href="/">HOME</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href="">OUR CARS</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href="">SHOP PARTS</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href="">TEST DRIVE</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href="">SERVICING</a>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href="">SUPPORT</a>
      </li>
      
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle text-white" data-toggle="dropdown" id="navbarDropdownMenuLink">STAFF</a>
        
        <div class="dropdown-menu">
          <a href="/user/listuser" class="dropdown-item">Users Management</a>
          <a href="/booking/bookings" class="dropdown-item">Bookings Management</a>
          <a href="/product/products" class="dropdown-item">Products Management</a>
          <a href="/checkout/checkouts" class="dropdown-item">Orders Management</a>
        </div>
      </li>
      
      <li class="nav-item">
        <a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'>&#xf07a;</i></a>
      </li>
      
      <li class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle text-white" data-toggle="dropdown" id="navbarDropdownMenuLink"><i class="material-icons">&#xe853;</i></a>
        <div class="dropdown-menu">
          <a href="" class="dropdown-item">LOGIN</a>
          <a href="" class="dropdown-item">SIGN UP</a>
          <a href="" class="dropdown-item">PROFILE</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

I have made various attempts to modify the navbar width and bootstrap properties, but so far nothing has been successful. Not sure if the issue is with the navbar or dropdown menu.

Thanks in advance for any advice!

htmlcssbootstrap-4

Answer №1

If you want to align the dropdown menu to the right without increasing the width of the page, simply add .dropdown-menu-right to .dropdown-menu. Is this the solution you were looking for?

Alternatively, Bootstrap collapse could be a good option for your case. Let me know if you want me to adjust my example!

body { height: 100vh }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671309110916">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="bg-dark h-100">
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger bg-color mb-3">

    <a class="navbar-brand" href="/"><img src="/img/logo.png" alt="" width="100px" height="40px"> RYCE</a>

    <button class="navbar-toggler" 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 class="collapse navbar-collapse" id="navbarNav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link text-white" href="/">HOME</a>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href="">OUR CARS</a>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href="">SHOP PARTS</a>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href="">TEST DRIVE</a>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href="">SERVICING</a>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href="">SUPPORT</a>
        </li>

        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle text-white" data-toggle="dropdown" id="navbarDropdownMenuLink">STAFF</a>

          <div class="dropdown-menu dropdown-menu-right">
            <a href="/user/listuser" class="dropdown-item">Users Management</a>
            <a href="/booking/bookings" class="dropdown-item">Bookings Management</a>
            <a href="/product/products" class="dropdown-item">Products Management</a>
            <a href="/checkout/checkouts" class="dropdown-item">Orders Management</a>
          </div>
        </li>

        <li class="nav-item">
          <a class="nav-link text-white" href=""><i style='font-size:24px' class='fas'>&#xf07a;</i></a>
        </li>

        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle text-white" data-toggle="dropdown" id="navbarDropdownMenuLink"><i class="material-icons">&#xe853;</i></a>
          <div class="dropdown-menu dropdown-menu-right">
            <a href="" class="dropdown-item">LOGIN</a>
            <a href="" class="dropdown-item">SIGN UP</a>
            <a href="" class="dropdown-item">PROFILE</a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4bea5a1b1a6ad94e7fae1fae5">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoMB9LTS58ONXgqbR9W8oWh/amnpF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8a9088908f">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtWsbFlB7jaZRssBXjsOMm/tB9LTS58ONgdNejt/alCaretdjo" crossorigin="anonymous"></script>

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 designing resizable overlay divs

Looking to design an image with an overlay gradient and text, similar to this: <div> <img src="url"/> <div background-image="other url" background-repeat:repeat-x;> <h2>some text</h2> </div> </div> Some impor ...

jqueryhtmlcss

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

javascripthtmlcss

Implementing automatic page breaks in Laravel using the mpdf libraryLet me know

I am attempting to automatically add a page break if the data exceeds 10. I am using mpdf in conjunction with Laravel and Vue. Below is my CSS code: <style> div.breakNow { page-break-inside:avoid; page-break-after:always; } </style> This is t ...

phpcsslaravelvue.jsmpdf

Preventing the collapse of the right column in a 2-column layout with Bootstrap 3

I've recently begun exploring Bootstrap and am attempting to achieve the following: (Left column - larger) Heading Heading 2 Heading Image Heading Image Heading Address (Right column - smaller) Heading Paragraph List items My issue ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

What is the best way to reposition the origin of the canvas to the center?

As a beginner in html and JavaScript, I am currently working on a program that involves points and lines in a coordinate system. However, the canvas for html5 has its origin at the upper corner, and I need to create a coordinate system with the origin at ...

javascripthtmlcanvas

"Utilize jQuery to prevent the default action, perform a specific task, and

I am currently working on a Rails application where I want to enable users to tag blog posts with categories by typing the tags into a text field and separating them with a space (which is functional!). However, I am facing an issue when trying to submit ...

jqueryhtmlruby-on-railsevent-handling

Create an input field dynamically by utilizing the append method in jQuery

Concern: As part of an edit page, I am working on appending an input field from a modal window to an existing panel while retaining the format of the rest of the fields. The user is currently able to create and add the new field using the code provided in ...

javascriptjqueryhtml

Tips for adjusting the height of a div element to completely occupy the unused portion of the viewport

How can I adjust the height of the sliding-in menu to fill the viewport below the mobile-navbar div without extending beyond it and causing scroll bars? The desired height should be: [100vh-(height of mobile-navbar)] I want to avoid setting a fixed value t ...

htmlcss

adjust the width of an element based on the size of characters within it

I need to ensure that the width of a div is equivalent to 10 characters If one character is equal to 2px, then I want the width to be 20px, even if the text is only 4 characters long. <div class="row"> <div class="key">City</div> ...

htmlcss

Is it possible to use jQuery to apply CSS styling to a div that is dynamically called by Javascript

I currently have the following HTML code: <div> <script type="text/javascript" src="someUrl"></script> </div> Once this script runs, it generates a nested div with links inside like this: <div> <div> <a hre ...

jqueryhtmlcss

Utilizing Bootstrap CSS within Vue's scope

I'm attempting to integrate Bootstrap into a Vue component while ensuring that all CSS is scoped. My initial approach was as follows: <style scoped> @import "~bootstrap/dist/css/bootstrap.css"; @import "~bootstrap-vue/dist/bootstrap-vue.css"; & ...

csstwitter-bootstrapwebpackvue.jsvue-loader

changing size when hovered over with the mouse is not consistent between entering and exiting

Hi there, I'm currently utilizing the transform: scale(); property on a website and could use some assistance with a particular issue I haven't been able to find an answer for online. Here is the code snippet I'm working with: HTML: <d ...

javascriptcsstransform

Step-by-step guide on generating a fluid list with Express and HTML

Looking to create a dynamic list by fetching data from a JSON file. I want the list items to redirect me to specific content based on their IDs when clicked. However, my current approach is not working as expected, and the list needs to be truly dynamic. ...

javascripthtmlnode.jsexpress

Guide on deploying Google App Script add-ons on Google Workspace Marketplace

Recently delving into Google App Script, I've taken my first steps in coding within the platform. Utilizing the deploy option provided by Google App Script, I successfully launched my app. However, upon deployment, I encountered difficulty locating my ...

javascriptcssgoogle-apps-scriptgoogle-sheetsgoogle-apps-marketplace

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass

Rearranging anchor tag order with the power of JQuery

Imagine I have five anchor tags <a id = "A" class = "Home">Home</a> <a id = "B" class = "Maps">Maps</a> <a id = "C" class = "Plans">Plans</a> <a id = "D" class = "Community">Community</a> <a id = "E" clas ...

javascriptjqueryhtmlcss

Increasing the height of nested Bootstrap columns by stretching them out

I am trying to ensure that the first two columns in both the green and violet rows always have the same height. I initially thought of using d-flex align-items-stretch, but it seems like it is not working because those elements are not within the same row ...

htmlcssbootstrap-5

Should I consider implementing Flexbox even if I need to cater to users still using IE9?

Currently, I am embarking on a fresh project centered around constructing a chat window. Typically, I would readily employ Flexbox for this endeavor; nevertheless, one of the stipulations for this project is to ensure compatibility with IE9. While I under ...

cssflexboxmodernizr

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

javascripthtmljsp