How to get all items on one row inside the nav-bar, and maintain the responsive design?

Question

How can I arrange my grid-layout to get all the items in the nav-bar on one row, with menu items to the left, and some links (or in this example, just one button) to the right?

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12 alert-danger">
      <div class="row">
        <div class="col-lg-10 alert-info">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="/">MyStore</a>
        </div>
        <div class="col-lg-2 navbar-collapse collapse" align="right">
          <div class="col-lg-10">
            <ul class="nav navbar-nav alert-success">
              <li><a href="/Products">Admin</a></li>
            </ul>
          </div>
          <div class="col-lg-2 alert-success">
            <a href="/Cart" class="btn btn-success">
              <span class="glyphicon glyphicon-shopping-cart">
              </span>
              Kr 514,00
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

I have added colors to the divs just to be able to see them better. They're all supposed to be one color when the formatting is done.

I'm using un-altered bootstrap.css:

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">

To me, the grid-layout looks to be correct in the markup, but the rendered result is just a right mess:

Edit

I solved a part of it by adjusting the col-lg-*. Now I just need to push the button all the way to the right and a bit down, to vertically align everything center inside the nav-bar:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12">
      <div class="row">
        <div class="col-lg-1">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="/">MyStore</a>
        </div>
        <div class="col-lg-11 navbar-collapse collapse" align="right">
          <div class="row">
            <div class="col-lg-9">
              <ul class="nav navbar-nav">
                <li><a href="/Products">Admin</a></li>
              </ul>
            </div>
            <div class="col-lg-3" align="right">
              <a href="/Cart" class="btn btn-success">
                <span class="glyphicon glyphicon-shopping-cart"></span>
                Kr 514,00
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

I edited your original code to adjust formatting. Please accept it first then update because your edit is on top of my edit. thanks — reiallenramos, Feb 01 '18 at 08:49
When you say menu items, are you talking about `li` elements (ie. Admin)? — reiallenramos, Feb 01 '18 at 08:56
@reiallenramos Yes. And the `a` element (`class="btn btn-success"`). — Stian, Feb 01 '18 at 08:59
I'm currently checking your code [here](https://codepen.io/reiallenramos/pen/jZOOOQ), but the responsive feature is getting in the way. Which view are you trying to solve? — reiallenramos, Feb 01 '18 at 09:02
@reiallenramos ... and the `a` element "MyStore" (`class="navbar-brand"`). They should all align on one row. — Stian, Feb 01 '18 at 09:03
@reiallenramos This is from the `_Layout.cshtml` in my asp.net core project. It is the "master" design for the whole site. — Stian, Feb 01 '18 at 09:05
please check my answer and tell me if you still have issues. I'll try to help once I get home — reiallenramos, Feb 01 '18 at 09:25
@reiallenramos Please see my latest edit; It's getting close. — Stian, Feb 01 '18 at 09:25

score 1 · Answer 1 · answered Feb 01 '18 at 09:24

If you intend to use Bootstrap's nav bar with heading, and nav items, they must have the following markup:

<div class="navbar">
  <div class="navbar-header">
  </div>
  <div class="nav navbar-nav">  <!--elements inside will be horizontal-->
  </div>
</div>

--

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header col-lg-12 alert-danger">
      <div class="col-lg-10 alert-info">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <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="/">MyStore</a>
      </div>
    </div>
    <div class="nav navbar-nav">
      <div class="col-lg-2 navbar-collapse collapse" align="right">
        <div class="col-lg-10">
          <ul class="nav navbar-nav alert-success">
            <li><a href="/Products">Admin</a></li>
            <li><a href="/Products">Another</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="nav navbar-nav">
      <a href="/Cart" class="btn btn-success">
        <span class="glyphicon glyphicon-shopping-cart">
        </span>Kr 514,00
      </a>
    </div>
  </div>
</nav>

more info here

I didn't see you latest edit when I posted this. Can you see if there's still an issue? — reiallenramos, Feb 01 '18 at 09:27
This renders "MyStore" alone on one row, and the other elements below. I'm afraid my partial solution looks to be is closer the result I'm after. — Stian, Feb 01 '18 at 09:52

score 0 · Answer 2 · answered Feb 01 '18 at 08:45

Add your inner level code inside row div, so that it will properly aligned to it.

  <div class="col-lg-2 navbar-collapse collapse" align="right">
       <div class="row"> <!-- should need for proper alignment -->
                <div class="col-lg-10">
                    <ul class="nav navbar-nav alert-success">
                        <li><a href="/Products">Admin</a></li>
                    </ul>
                </div>
                <div class="col-lg-2 alert-success">
                    <a href="/Cart" class="btn btn-success"><span class="glyphicon glyphicon-shopping-cart"></span> Kr 514,00</a>
                </div>
       </div>
   </div>

How to get all items on one row inside the nav-bar, and maintain the responsive design?

2 Answers2