CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstrap
DVL
DVL

Reputation: 192

Navbar Collapse not working properly in Bootstrap

It's my mvc partial view: 

<nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.RouteLink("მთავარი", "AdminControlUsers", null, new { @class = "navbar-brand", @style="padding-left:100px; padding-right:100px"})//this line
            </div>
    <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    @if (ViewBag.NavBarActive == "მომხმარებლები")
                    {
                        <li class="active">@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li>
                        <li>@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li>
                        <li>@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li>
                    }
                    @if (ViewBag.NavBarActive == "Stored Procedures")
                    {
                        <li>@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li>
                        <li class="active">@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li>
                        <li>@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li>
                    }
                    @if (ViewBag.NavBarActive == "User_Admin Results List")
                    {
                        <li>@Html.RouteLink("მომხმარებლები", "AdminControlUsers")</li>
                        <li>@Html.RouteLink("Stored Procedures", "ControlStoredProcedures", new { page = 1 })</li>
                        <li class="active">@Html.RouteLink("გაშვებული Stored Procedure-ები", "Admin_User_Results_List")</li>
                    }
                </ul>
                <ul class="nav navbar-nav navbar-right">
    li><a href='@Url.Action("LogOut", "Administrator")'><span class="glyphicon glyphicon-log-out"></span> გამოსვლა @Session["Admin"].ToString()</a></li>
                </ul>
            </div>
        </div>
    </nav>

When I resize my browser my navbar screenshots: enter image description here

enter image description here

enter image description here enter image description here

When I delete one line of it:

@Html.RouteLink("მთავარი", "AdminControlUsers", null, new { @class = "navbar-brand", @style="padding-left:100px; padding-right:100px"})

if i delete @style="padding-left:100px; padding-right:100px" it works properly :/. Please help

Upvotes: 0

Views: 1822

Answers (2)

ThinhLe
ThinhLe

Reputation: 409

Here you are:

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

<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <nav id="menu" class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">WebSiteName</a>
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">Page 1-1</a>
              </li>
              <li><a href="#">Page 1-2</a>
              </li>
              <li><a href="#">Page 1-3</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Page 2</a>
          </li>
          <li><a href="#">Page 3</a>
          </li>
        </ul>        
      </div>
    </div>
  </nav>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
  <p>abc</p>
</body>

</html>

Upvotes: 0

Syden
Syden

Reputation: 8625

Content is overflowing sooner than collapse button, you would need to set the navbar collapse button to display earlier.

You can do so via CSS, set this last on your stylesheet (adjust min-width and max-width to your desire):

@media (min-width: 768px) and (max-width: 991px) {
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-collapse.collapse.in {
        display: block !important;
    }
    .navbar-header .collapse, .navbar-toggle {
        display:block !important;
    }
    .navbar-header {
        float:none;
    }
}

Test it on this resizable external Fiddle

enter image description here

Upvotes: 1

Related Questions