Dropdown Menu

User 2709960 Photo

Registered User
5 posts

Apologies if this has already been covered. I'm trying to build a dropdown menu with several buttons that dropdown. The prebuilt only has one - and when duplicated all goes to those same few. I realize this is probably something simple to correct... I can absolutely rewrite in the html file but how do I do it in Bootstrap?

User 2709960 Photo

Registered User
5 posts

No one has any suggestions?
User 122279 Photo

Senior Advisor
14,251 posts
Online Now

Sorry that nobody has been able to help you. I can't offer much help either. I have tried adding another dropdown button to the built-in horizontal nav component, but even with different IDs and attributes, the two drop-down containers overwrite each other. If you try to move one of them a bit to the right, the other one moves too, and leaves 'something' behind, which I have not been able to identify yet. Someone with more expertise has to chime in here.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com

User 379556 Photo

Registered User
1,393 posts
Online Now

I don't have more expertise I'm afraid, but the following seems to work using RBB Bootstrap 4 with components, and is quick and easy. I started from a blank file.

1. From Content > Components I added a Navigation with Dropdown Menu (Horizontal).
2. I selected the outermost container and, in the Design panel
(a) I set the right and left padding to zero;
(b) I clicked on the Duplicate button enough times to create all the Dropdown Links I wanted.
3. I removed as many of the non-dropdown items (MenuItem 1s and MenuItem 2s) as I did not need, or made duplicates of them to create any extra ones I needed.

The above then allowed the changing of the text and creating of links etc. without any adjustment of IDs or classes. I found it important to ensure that the Dropdown menus remain at the left of each of the containers duplicated at item 2 above. Otherwise the links in the dropdown won't be aligned properly with the Dropdown heading.

User 171749 Photo

Registered User
91 posts

I did something like Frank. I just created multiple Navigation with Dropdown Menu (Horizontal) and dragged them all to the same column. Trick seems to be that all the dropdowns need to be in their own container from what I see. And as Frank suggest you can tweak the padding to make it look like one menu. Of course you'll need to tweak a border where they join too

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.