bootstrap menu is not collapsing in tablet portrait preview

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Saied 349 posts 674 karma points

Jul 07, 2015 @ 21:32

I have a menu which seems to behaving properly on most previews, but when I go to portrait mode for a Tablet, it does not collapse the menu, instead it pushes it down. Here is code for the master page

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = null;
    var home = @CurrentPage.Site();
}

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="@CurrentPage.siteDescription">

    <title>@CurrentPage.Name | @CurrentPage._siteTitle</title>

    <!-- Fonts -->
    <link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
    <link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <header>
      <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <nav class="navbar navbar-default">

                    @{ Html.RenderPartial("MainNavigation"); }
                </nav>
            </div>
        </div>
      </div>
    </header>

    @RenderBody()

    <footer>
      <div class="container">
        <div class="row">

          @*@{ Html.RenderPartial("BottomNavigation"); }*@

        </div>
      </div>
    </footer>

    <!-- Javascripts -->
    <script src="/scripts/jquery-1.9.1.min.js"></script>
    <script src="/scripts/bootstrap.min.js"></script>
  </body>
</html>

Here is code for the MainNavigation:

@inherits UmbracoTemplatePage

@*
    This snippet displays a list of links of the pages immediately under the top-most page in the content tree.
    This is the home page for a standard website.
    It also highlights the current active page/section in the navigation with the css class "current".
*@
@{ var selection = CurrentPage.Site().Children.Where("Visible"); }

    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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="~/">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            @foreach (var item in selection)
            {
                <li class="@(item.IsAncestorOrSelf(CurrentPage) ? "active" : null)">
                    <a href="@item.Url" class="@(item.Name.Equals("Product Search")? "glyphicon glyphicon-search" : null)">

                      @item.Name

                    </a>
                </li>
            }
        </ul>
    </div>

Here are a couple images:

Tablet landscape:

enter image description here

Tablet Portrait:

enter image description here

Copy Link

is working on a reply...

Please Sign in or register to post replies