Dropdown menu out of screen

HTML & CSS
,
1

Hello,
I am creating a Dropdown menu using HTML, CSS and Js.
and the problem is, when I add submenu on the last item it appears out of the screen.
is there anyway so that, if the menu doesn’t get any space on right it will appear on left.

Here is the screenshot.

961×509 21.8 KB

Here is the git repository.

Thank You

2

I am not familiar with bootstrap, so there’s a better than good chance I’m not thinking of the best way to solve this.

The only file I noticed in your repo that might be related is “popper min” which being minified, doesn’t make it easy to read the code.

Anyway, I think having the JavaScript find the X position and width of the parent element could be used to determine if the submenu has room to open to the right. If it doesn’t have the room, where would be an acceptable position for it, to the left?

4

Thank you for your replay,
if I do not use bootstrap but pure HTML and CSS and js, is there any way to do that?

5

There may even be a way to do it without JavaScript.
Maybe @PaulOB or @ronpat know a trick?

1 Like
6

To do it automatically would require js but what I usually do for the rightmost menu item is to simply show the menu to the left side by default.

You can do it with css by either using last-child of the top menu or just add a class to the last menu item and instead of placing the submenu at left:100% place it at left -100%. It does depend on the exact css that is being used so you may need to use a fixed width instead of the 100%.

I’m on a mobile at the moment so can’t test but roughly something like :

.mainNav > ul > li:last-child > ul ul {
        left: -100%;
}
4 Likes
7

Thank you, paul,
thanks for your help.
let’s see.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.