CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Merlin
Merlin

Reputation: 978

How can I prevent Bootstrap Navbar from stacking the brand on top of the menu?

I've customized a basic Bootstrap navbar - that's about all I'm really using for a project, to not collapse when shrunk. However, whenever the menu is put into a smaller window, it seems to place the brand on top of the menu itself. enter image description here

There will be enough space to not worry about this with the actual menu, so I'd like to figure out how to prevent it from doing this - here is the related script:

<nav class="navbar navbar-inverse">
<div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="#">Project</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
                </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar-fixed-top/">Fixed top</a></li>
            </ul>
    </div><!--/.nav-collapse -->
</div><!--/.container-fluid -->

And my applied CSS for it at the moment: 

.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li, .navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right!important;
}

.container-fluid {
    width: 80%;
    margin: auto;
}

Upvotes: 2

Views: 1031

Answers (2)

LKG
LKG

Reputation: 4192

Add below markup just below of <div class="container-fluid"> in your html.

<a class="navbar-brand" href="#">Project</a>

Below is working fiddle for the same

Responsive navigation with bootstrap

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

Your <div class="navbar-header"> is a block, just move <a class="navbar-brand" href="#">Project</a> into navbar block.

.navbar-brand {
  margin-top: 3px;
  margin-right: 15px;
}


.navbar-collapse.collapse {
  display: block!important;
}

.navbar-nav>li,
.navbar-nav {
  float: left !important;
}

.navbar-nav.navbar-right:last-child {
  margin-right: -15px !important;
}

.navbar-right {
  float: right !important;
}

.container-fluid {
  width: 90%;
  margin: auto;
}

.navbar-brand {
  margin-top: 2px;
  margin-right: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div id="navbar" class="navbar-collapse collapse">
      <a class="navbar-brand" href="#">Project</a>
      <ul class="nav navbar-nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar-fixed-top/">Fixed top</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
  <!--/.container-fluid -->

Upvotes: 1

Related Questions