locked
Bootstrap NavBar - Dropdown heading duplicate RRS feed

  • 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.

    Thursday, November 8, 2018 9:21 AM

All replies

  • 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">

    Thursday, November 8, 2018 1:09 PM
  • 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

    Friday, November 9, 2018 9:47 AM