Collapsing a Nav

[Steve-G-A]

Hi,

How do I enable colapsing of a nav?

Basically I need output similar to below (and similar to the nav on your web site).

<div class="container">
      <div class="masthead">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>

          <div class="nav-collapse">
              <ul class="nav">
                <li class="active"><a href="/" class="">Home</a></li>
                <li><a href="goud-zilver.html">Oud goud en zilver</a></li>
                <li><a href="koersen.html">Officiële koersen</a></li>
                <li><a href="webshop/" target="_blank">Webwinkel</a></li>
                <li><a href="diversen.html">Diversen</a></li>
                <li><a href="contact.php">Contact</a></li>
              </ul>
              </div>  
            </div>
          </div>
        </div><!-- /.navbar -->
      </div>
</div>

Thanks

Steve

[DmitryEfimenko]

This is one of these cases when you'll have to write some html by hand. My site uses something similar to the following with some custom css:

<nav>
    @using (var nav = Html.Bootstrap().Begin(new Nav().Style(NavType.NavBar).Class("navbar-right")))
    {
        <div class="navbar-header">
            <button type="button" class="btn navbar-toggle" data-toggle="collapse" data-target=".navbar-top-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">My Site</a>
        </div>

        <div class="collapse navbar-collapse navbar-top-collapse">
            @nav.ActionLink("something", "asd", "asd")
            @nav.Link("Google", "www.google.com").Class("active")
            @using (var dd = nav.BeginDropDown(new DropDown("Title").ActiveIf(true), new { @class = "awesome" }))
            {
                @dd.Header("Some Header")
                @dd.ActionLink("Action 1", "ActionOne", "ctrl")
                @dd.ActionLink("Action 2", "ActionTwo", "ctrl")
                @dd.Divider()
                @dd.ActionLink("Action 3", "#").Disabled()
            }
        </div>
    }
</nav>

You'll have to play around a bit with css (and maybe html) to get it working.