Position opened items (mostly nav) in it's actual styled position

As mentioned in another thread, I can still double click a menu item to open it’s list, but (and yeah I’m slacking here as I’ve been meaning to ask for this for a long time) when it opens, it does not open anywhere near where it will be open on a live site. It just positions itself directly over the top of the navbar and covers the parent item I double clicked to open it.

Is it possible, for more reasons than just double clicking, to get the opened menu items to actually open in their real position according to our CSS?

I’ve had to alter positions of some dropdowns many times to accomodate the position it opens on the page being too far to the right usually, sometimes left, but mostly the right. Changing to the nice shiny new utility classes like dropup, dropright etc. is great except for doing the dropleft also makes it position directly over the parent item on the menu (a bootstrap thing I think, not a BSS thing) so I end up altering that CSS for it.

Needless to say, when I am trying to position an open dropdown, it’s very non productive to have it “not” open in the position it is coded to be in. Would sure make editing them a lot easier if it did, and of course double clicking the parent menu item to close it would be easier as well.

Note: This is made more difficult to close the menu items when you click outside the menu because you lose the top edit bar as well so you cannot close it that way either and of course you lost your position in the Overview panel so you have to either find it there again or click to get the right part of the open box to bring the top menu bar back to close it.

Here’s a perfect example of what I mean. Can’t close it with the bar, it’s not there because I clicked on something outside the nav. Can’t double click the parent item in the navbar, it’s covered.

CleanShot 2022-05-12 at 10.33.17

If possible can you share a link to this site or send a bsdesign? Normally navbars don’t look like this when they’re expanded which leads me to think there may be some css in your design that misbehaves.

Hmm my own website doesn’t have this issue so I’m definitely wrong on that it always does it. I’ll have to send you the big one site I guess. I also need to say that I have not been using the default menus for very long as most of my clients needed more than one dropdown level so I’ve used external scripts for them for quite some time till BS4/5.

It seems to be mostly this particular site I’m working on. Most likely user error sighs.

Bootstrap has started adding a data-bs-popper=“none” attribute when opening dropdown menus that are in a navbar. We will add this attribute automatically in our next release. Meanwhile, you can add it to your Menu components manually and they will be positioned properly within the app.

@gabby you can take a look at the autoClose attribute as well. For example if one want a multi level dropdown and do not set the attribute data-bs-auto-close='outside' to prevent the dropdown menu to close when one try to open the submenu

1 Like

Ohhhhh Thanks again @gabby for that fix, works perfectly now!

1 Like