Hi every one How can I use the burger menu as a menu if there are over 7 navbar items in the menu.

Here is what i am trying to do

 @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    var selection = Model.Content.Site().Children()
                        .Where(x => x.IsVisible());
}
@if (selection.Count() <= 5)
{
    <ul class="navbar-nav ml-auto">
        @foreach (var item in selection)
        {
            <li class="nav-item">
                <a href="@item.Url">@item.Name</a>
            </li>
        }
    </ul>
}
else
{
    <link href="~/css/test.css" rel="stylesheet" />
    <div id="DontShowNav" class="pull-left">
        <div class="dropdown">
            @*<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="" aria-haspopup="true" aria-expanded="false">
                    Menu
                </a>*@
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fas fa-bars"></i>
                Menu
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                @foreach (var item in selection)
                {

                    <a href="@item.Url" class="dropdown-item">@item.Name</a>

                }
            </div>
        </div>
    </div>

}