Skip to main content
Roopavathy
Roopavathy
Known Participant
November 30, 2022
Question

Dropdown menu to be on left side

  • November 30, 2022
  • 2 replies
  • 1264 views

Hi there,

 

I am using drop down where the li elements are on the right side. I want the last menu's li elements to be on the left so that it doesn't get hidden. Kindly help. Screenshot attached.

 

    This topic has been closed for replies.

    2 replies

    O
    osgood_
    Legend
    November 30, 2022

    What menu system are you using, a custom coded one or an off the shelf one, such as Bootstrap? Might be better to post a url to the page in question so someone can determine the best approach taking into account what code you currently are deploying.

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    November 30, 2022

    Copy and paste the following code into a new document

     

     

     

     

    <!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="nav w-100 justify-content-between">
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown1" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu" aria-labelledby="dropdown1">
                            <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>
                    <div class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" id="dropdown2" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown2">
                            <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>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

</html>

     

     

     

    As a side note: I did not write this code, this was written automatically using Wappler.

     

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      November 30, 2022

      Sweet. 🙂

       

      Nancy O'Shea— Product User & Community Expert
      O
      osgood_
      Legend
      November 30, 2022
      quote

      Sweet. 🙂

       


      By @Nancy OShea

       

      I'd read the OPs post more carefully if I were you as that example does nothing to help except place a drop down to the extreme left and extreme right of the window, not what is required by the OP.

       

      Let me explain. The OP has a second tier menu which opens to the right of the first level dropdown and of course that will disappear off the extreme right edge of the browser window which is why they want it to open to the left so it stays within the bounds of the window, whilst I assume they require the other second tier menus to open to the right of the first level dropdowns as they have space to do so.

       

      Either do it with javascript by detecting when the last menu is offscreen and then placing it to the left or probably simpler to do it with css. This kind of menu is troublesome and should really be avoided and replaced by something simpler.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices