Problem with submenu alignment

Pinegrow PRO
1

Good day everybody,

After I received great help here a few days ago, I would like to report another problem and I hope to get such a great solution to my problem again.

I have a menu with a submenu. As soon as I move the mouse over the menu item in the top level, the submenu opens.
It protrudes over the right edge of the main menu button. As soon as I click on the point, the whole “Submenu Cointainer” sprints a little to the left and thus aligns itself under the right side of the upper menu point (this is actually intended and is generated by the command “dropdown-menu-end”) .

My question now is: how can I get the submenu to be aligned when the main menu button is “run over”, or alternatively, how can I get the submenu to be opened only when the main menu item is pressed the mouse is “clicked” (like the other main menu items).

Demo-Page

I would be very grateful for your help and an associated solution!

2

Hi @wgk,
I think maybe some screenshots annotated with the desired behavior would help me to understand. My offhand guess is that there are some CSS classes getting applied that you need to overrule.
Cheers,
Bob

3

Hello bob,

Thank you for your prompt reply.

Here are a few pictures that illustrate my problem.

The submenu is displayed incorrectly on picture 01 and correct on pictures 2 and 3.

01_not_ok

02_ok

03_ok

4

Hi @wgk,
I have a strong suspicion that it is the custom JavaScript for mobile adding the .show class where you don’t want it. Try seeing if the behavior (on desktop) is replicated when you don’t load in the Javascript. If it “cures” the problem then the script will have to be made more specific - likely by insuring it only runs on mobile.
Cheers,
Bob

5

Hello bob,

Thank you for your reply.

I commented out the link to the JS script “menu-close.js” in the HTML code.

Unfortunately, I cannot determine any change in the problem.

Best wishes
mark

6

Hey,
I’m not sure where it is coming from, but when you click on the dropdown it shifts to the left because it acquires a property left of -23.3125px through the addition of a new attribute data-bs-popper="none". Not sure why that is being applied, but you should be able to mimic it by adding a new CSS declaration.Basically add the same positioning to the <ul> of the dropdown menu.
Cheers,
Bob

1 Like
7

Hello Bob,

thank you very much for your answer, which brought me to a solution.

I gave the whole thing an additional ID and entered the corresponding values ​​of the deviation in it. Then I set the edge radius to 0 in the bootstrap class .dropdown-menu.

The menu is therefore at the top and no longer appears when you click on the main article.

Now it would only be nice if the Points submenu were not displayed and activated with a mouse-over but only with an on click.

Do you have any other ideas?

8

Hi @wgk,
That is really odd. By default, the menus are supposed to open on click, not hover. Not sure why they are doing that.

As an aside - back to your original problem. I’m not really much of a Bootstrap user and so I was digging through the documentation a little and ran into an attribute I hadn’t seen before. data-bs-auto-close. You might want to check if it solve your mobile issue. Dropdowns · Bootstrap v5.0
Cheers,
Bob