rhedin rhedin - 1 month ago 28
ASP.NET (C#) Question

Multi row navigation bar with centered logo

Is it possible to have a multi row navigation bar without using two navigation bars in bootstrap?

I want to accomplish something like this:
enter image description here

Here is my code:

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Logo", "Index", "Home", new { area = "" }, new { @class = "navbar-brand custom-li" } )
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink( "About us", "About", "Home" )</li>
<li>@Html.ActionLink( "Contact", "Contact", "Home" )</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>@Html.ActionLink("Sign up", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" } )</li>
<li>@Html.ActionLink("Login", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" } )</li>
</ul>
</div>
</div>
</div>
</body>


Here is JSFiddle: https://jsfiddle.net/oc88hnLL/2/

Also, my solution does not work when collapsing. The logo moves to the left and does not stay centered when the window becomes too small.

Answer

see snippet below or jsfiddle -> jsfiddle

for your bootstrap to work, be sure to include jQuery in <head> section.

let me know if this is what you were looking for

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.navbar-fixed-top {
    background-color: #FFF;
}

.navbar-fixed-top,
.navbar-fixed-bottom {
    border-top-width: 0px;
    border-bottom-width: 0px;
}

.navbar-header {
  float:left;
  width:100%;
  text-align:center;
}
   
ul.navbar-nav > li { 
display:inline;
}
ul.navbar-nav{
   float: none;
   margin: 0 auto;
   text-align:center;
   display:table;
}
.logo {
  text-align:center;
}


.content { min-height:1000px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<!DOCTYPE html>
<body>
    <div class="navbar navbar-white navbar-inverse navbar-fixed-top">

            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="logo" href="">Logo</a>
            </div>
      
  
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="">About us</a></li>
                    <li><a href="">Contact</a></li>
                    <li><a href="">Register</a></li>
                    <li><a href="">Login</a></li>
                </ul>
            </div>
        </div>

    
</body>

Comments