0

Trying to add a dropdown proof of concept to a website I am working on. Using the Minty theme from bootswatch. The drop down is not expanding when clicked. I seem to referencing the correct js scripts. jQuery and Bootstrap in that order.

        <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                @Html.ActionLink("Home", "Index", "Home", null, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("About", "About", "Home", null, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                @Html.ActionLink("Contact", "Contact", "Home", null, new { @class = "nav-link" })
            </li>
            <li class="nav-item">
                <p>@Html.ActionLink("All Products", "Index", "Products", null, new { @class = "nav-link" })</p>
            </li>
            <li class="nav-item">
                <p>@Html.ActionLink("Supplements", "Supplements", "Products", null, new { @class = "nav-link" })</p>
            </li>
            <li class="nav-item">
                <p>@Html.ActionLink("Protein Bars", "ProteinBars", "Products", null, new { @class = "nav-link" })</p>
            </li>
            <li class="nav-item">
                <p>@Html.ActionLink("Workouts", "Workouts", "Products", null, new { @class = "nav-link" })</p>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
        @Html.Partial("_LoginPartial")
    </div>
</nav> 

Here is the bundle config code

        public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.min.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/Bootswatch.Minty.min.css",
                  "~/Content/font-awesome.min.css",
                  "~/Content/site.css"));
    }

Here is the html generated for the view just before the closing body tag.

    <script src="/Scripts/jquery-1.10.2.js"></script>

<script src="/Scripts/bootstrap.min.js"></script>
ereid
  • 1
  • 1
  • I don't see anything obviously wrong, aside from those `

    ` tags in the navigation list. Do you see any errors in the developer console (normally activated with the F12 key from within your browser).

    – Tieson T. Apr 24 '18 at 01:40
  • @ereid can you share your Layout page? I think you add `bootstrap.js` reference twist time. – Ashiquzzaman Apr 24 '18 at 03:41
  • I upgraded the bootstrap and jQuery Nuget packages and, everything is working now. Odd that it did not work earlier. @TiesonT. not sure why I added the

    tags, but thanks for point that out. I removed those.

    – ereid Apr 25 '18 at 12:34
  • The project template adds Bootstrap 3, so if you hadn't previously updated, that would definitely explain why your Minty theme didn't work. – Tieson T. Apr 25 '18 at 17:17

0 Answers0