Sign in Register
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
    Saied
    0

    Bootstrap menu is not collapsing in Tablet Portrait Preview

    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies