Bootstrap NavBar - Dropdown heading duplicate

Question

User1355181370 posted

Been toying around with this for a bit and have had quite a bit of success so far but there's just one problem I personally can't seem to fix.

I'm using bootstrap to create my navbar and everything in it which works fine for the most part, until I come to the point where I am using dropdowns.

What I want it to look like is something like this.

The most optimal result I have gotten so far though looks like this.

This is the code that produces this result

@model MessePrototyp.Models.MenuItem

<li class="dropdown-submenu">

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

    <ul class="dropdown-menu">
        @foreach (var subitem in @Model.MenuItems)
        {
            if (subitem.MenuItems.Count != 0)
            {

                @await Html.PartialAsync("MenuItem", @subitem)

            }
            else
            {
                <li><a a class="dropdown-item" asp-area="" asp-controller="@subitem.Controller" asp-route-id="@subitem.Notation" asp-action="@subitem.Action">@subitem.Caption</a></li>


            }


        }
    </ul>
</li>

The problem seems to stem from this line of code here

    <a href="#" class="dropdown-item dropdown-toggle" data-toggle="dropdown">@Model.Caption</a>

But I have not yet found a way to work around it as anything I've tried is even further away from what I want to achieve.

Answer 1

User379720387 posted

The only difference I see with mine is the class on the <a> tag.

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">

Answer 2

User-854763662 posted

Hi MIfraa ,

It seems to be a mess at the level of the drop-down menu.

The following is a demo I made and the display of the result.

@model MVC2_1Test.Models.Country

<ul class="nav navbar-nav navbar-left">
    <li class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            @Model.CountryName
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            @foreach (var subitem in Model.Cities)
            {

                <li><a a class="dropdown-item">@subitem.CityName</a></li>

            }
        </ul>
    </li>
</ul>
    

Best Regards ,

Sherry