How to implement Menu in MVC 5

Question

A MVC 5 project was created and you want to change the menu of this one, for it resorted to Bootwatch, the menu that you want to implement is the following

The first thing I did was change the general style of my project, download the bootstrap.css file

and then I replaced it with my BundleConfig because of the previous one I had, this modifies the style of my project, but does not include the aforementioned navbar

To put the Navbar that you want, implement the following code in my _Layout.cshtml:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Muebles Pangal</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-dark bg-success">
            <a class="navbar-brand" href="#">Muebles Pangal</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Categorias")">Categorias </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Productoes")">Productos </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="@Url.Action("Index", "Ubicacions")">Proveedores </a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0">
                    <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
                    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
                </form>
            </div>
        </nav>
        </div>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year - Sistema Bodega</p>
            </footer>
        </div>

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)
</body>
</html>

But when executing my project I find the following problem, my menu does not work in a good way to the responsive call, this means that when I change (shrink) the size of my browser and call the menu from my <span class = "navbar- toggler-icon "> </ span> this is displayed, but it immediately collapses again.

So it does not work in the right way, I've been trying to solve this for days but I have not had good results. I have installed the Bootstrap and Bootstrap.less packages, could someone help me? what's going on?

any help for me?

So when you click the button, it shows the menu.. then.. without clicking the button again.. the menu disappears? Are you able to create a JSFiddle? — Grizzly
– Grizzly, Commented May 14, 2018 at 17:44
Exactly is that the behavior, you know what's going on? @M12Bennett — fytoahse
– fytoahse, Commented May 14, 2018 at 17:45
And all you did was copy and paste the code from bootswatch? no changes? — Grizzly
– Grizzly, Commented May 14, 2018 at 17:49

karthik · Accepted Answer · 2018-05-14 17:50:28Z

1

You are missing jQuery.min.js i believe, or it might be placed in the wrong order in your code structure. Hope this snippet helps!!

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-lg navbar-dark bg-success">
    <a class="navbar-brand" href="#">Muebles Pangal</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarColor01">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Categorias ")">Categorias </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Productoes ")">Productos </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="@Url.Action(" Index ", "Ubicacions ")">Proveedores </a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" placeholder="Buscar" type="text">
        <button class="btn btn-secondary my-2 my-sm-0" type="submit">Buscar</button>
      </form>
    </div>
  </nav>

answered May 14, 2018 at 17:50

karthik

1489 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Grizzly Over a year ago

I don't think it's because of jQuery.min.. that's just a minimal version of the normal jQuery.js.. which I believe the navbar wouldn't work if that wasn't loaded

karthik Over a year ago

but all i did was add it on top and its working as expected, also if you notice he only has bootstrap.js and no jQuery at all - unless its in a different location

Grizzly Over a year ago

I don't think the OP is showing us all of their code.. typically by default with a MVC project there is another bundle in the Bundle.config that references jquery.. something like this: "~/Scripts/jquery-{version}.js",

karthik Over a year ago

in that case it might be imported after bootstrap.js is imported. BS website clearly states to place jquery before bs.js. Also its my hunch as this solves the problem. I might be wrong as well :)

fytoahse Over a year ago

I have tried your answers and it still does not work, how can I provide more information about my problem? @karthik

|

L0uis · Accepted Answer · 2018-05-14 17:47:36Z

0

Can you check your css for the following:

.navbar-collapse.collapse {
        display: none!important;
    }

I am able to get a working menu in a new MVC 5 project using what you posted, but I do not have the same css as you.

Please see a similar problem: Bootstrap mobile menu wont stay open

answered May 14, 2018 at 17:47

L0uis

7295 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to implement Menu in MVC 5

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related