Dropdown menu to be on left side

Forum|Forum|3 years ago
November 30, 2022
11 replies
1293 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 is closed to new replies. Start a new post to keep the conversation going.

O

osgood_

Legend

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

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

Sweet. 🙂

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.