How to href dropdown menu in navbar

Bootstrap Studio Help
1

Hello all,

I am unable to delete the data-toggle="dropdown" from the below code which is locked by bootstrap studio.

<a href="//www.w3schools.com">Products <span></span></a>

I want to give a link for dropdown menu itself apart from the submenus. But in order to do that I have to remove - data-toggle="dropdown" from the above code and only by doing that I was able to give a link. But this is not possible with the bootstrap studio.

2

Just add an href line to the code using the boxes in the Attributes pain that is below the HTML window.

Click the plus sign below the class names box.

Put href in the first box and the URL in the second box, both without quotes.

That "should" add the href tag to your code. Let me know if it works, I'm working off theory in my head since I don't use the internal menus.

3

No that does not work.

This the actual code : (a data-toggle="dropdown" aria-expanded="false" href="#https://www.w3schools.com" class="dropdown-toggle">Products

Here am unable to remove data-toggle=dropdown. with this href doesn't work?

4

this code works.

<li class="upper-links dropdown"><a href="http://clashhacks.in/">Dropdown</a>
                <ul class="dropdown-menu">
                    <li class="profile-li"><a href="http://clashhacks.in/">kavi</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                    <li class="profile-li"><a href="http://clashhacks.in/">Link</a></li>
                </ul>
            </li>

But am unable to represent this code in bootstrap studio?

5

I see what you mean, hmm not sure how to get around the data toggle part of the setting or if you can. Hopefully someone else that has worked with the built in menu setup will have more info, but I'm pretty sure it can't be done and still keep the dropdown ... with this menu. That's why I use external menu systems, the Bootstrap menus are too restricting.

As a work around, why not just add the option you're trying to add to the dropdown button, as a separate dropdown item instead? That would be the practical and typical way of doing it. Not really a work around, that's really the intended way.

Just curious on this part, did you add that hash tag in the URL or did the app do that? If you did, take it out. If not then you should probably see if there may be a bug there as that shouldn't be there if you add a URL line.

Also, when you add the URL line, does it add the info to the Options pane at all to edit or is it only showing up in the Attributes area to edit?

6

You can either Convert the whole Navbar to HTML and hand edit it, or you can manually drag/drop and build the Navbar manually for more control.

I would have to say that it does seem a little overly locked down, as the dropdown is a UL inside a LI but you yourself can't drag in an UL into a LI. :(

Saj

7

Not sure if this is any help this late on. but I found that if I add an attribute as follows.

Key: data-bs-toggle
Value: “”

It overrides the locked bootstrap one and the link works

I show my menu-items on hover so I set my CSS as
.dropdown:hover .dropdown-menu {
display: block;
}

1 Like