Navbar element drops to second line instead of aligning to the right Options

[rg3]

My right aligned navbar element drops to second line instead of aligning to the right when shown on screens > 768px (boostrap 3.3.5)

Does anyone know how I can get it to stay right aligned on the first line even on smaller screens?

Here is my jsfiddle:
https://jsfiddle.net/g5uhzqez/4/

[Christian J]

My right aligned navbar element

You mean the NAV element? I see nothing that right aligns it.

(boostrap 3.3.5)

I see no javascript either.

Here is my jsfiddle:
https://jsfiddle.net/g5uhzqez/4/

You can't nest CSS rules like this (except for @media or @import rules):

CODE

@media all and (min-width: 768px) and (max-width: 1023px) {
  .navbar {
    .item {
      margin: 17px 0 17px 10px;
    }
    .price {
      margin: 17px 15px 17px 10px;
    }
  }
}

Instead, nest the selectors like this:

CODE

@media all and (min-width: 768px) and (max-width: 1023px) {
  .navbar .item {
      margin: 17px 0 17px 10px;
    }
   .navbar .price {
      margin: 17px 15px 17px 10px;
    }
}

[rg3]

You mean the NAV element? I see nothing that right aligns it.

Both the "navbar-right" and the "pull-right"-classes on the ul-element right aligns it. I know I only need one of them, but tried several different solutions for bringing them on the same line, but it doesnt work.

CODE

        <ul class="nav navbar-nav navbar-right pull-right">
          <!-- SHOPPINGCART -->
          <li class="shopping-cart">
            <button class="navbar-btn btn-cart">
              <span class="fa fa-shopping-cart fa-2x" aria-hidden="true"></span>
            </button>
          </li>

          <!-- TOTAL ITEMS -->
          <li class="item">
            <span class="item-no">2</span>
            <span class="item-unit">st</span>
          </li>

          <!-- TOTAL AMOUNT -->
          <li class="price">
            <span class="price-total">500,00</span>
            <span class="price-unit">kr</span>
          </li>

          <!-- CHECKOUT BUTTON -->
          <li class="checkout">
            <button type="button" class="btn btn-default navbar-btn">
              Check out
            </button>
          </li>
        </ul>

I see no javascript either.

In JSFIDDLE it is added as an external resource. You can see it in the left pane.

You can't nest CSS rules like this (except for @media or @import rules):

CODE

@media all and (min-width: 768px) and (max-width: 1023px) {
  .navbar {
    .item {
      margin: 17px 0 17px 10px;
    }
    .price {
      margin: 17px 15px 17px 10px;
    }
  }
}

Nested rules are possible with SCSS/SASS, which this is (see right top corner in JSFIDDLE for which type of CSS is being used).

[pandy]

As I understand it at least SASS is a preprocessor that is run before publishing, spitting out a normal CSS file. So show us the stuff that's actually served to the browser, not what you fiddle with before that point.

http://sass-lang.com/guide#topic-1

[rg3]

As I understand it at least SASS is a preprocessor that is run before publishing, spitting out a normal CSS file. So show us the stuff that's actually served to the browser, not what you fiddle with before that point.

http://sass-lang.com/guide#topic-1

Here is the produced CSS:

CODE

.navbar .item {
  margin: 17px 10px 17px 15px; }
.navbar .price {
  margin: 17px 15px 17px 10px; }

.navbar-form {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: 8px auto; }

.btn-cart {
  border: none;
  background: transparent; }

/******************* MEDIA QUERIES *******************/
@media all and (max-width: 767px) {
  .navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin: 0px auto;
    z-index: -1; }

  .navbar-form {
    display: none; }

  .navbar-toggle {
    float: left !important;
    margin-left: 15px; }

  .navbar .item-unit {
    display: none; }
  .navbar .price {
    display: none; }
  .navbar .checkout {
    display: none; }

  .navbar-collapse.in,
  .navbar-collapse.collapsing {
    clear: left; } }

@media all and (min-width: 768px) and (max-width: 1023px) {
  .navbar .item {
    margin: 17px 0 17px 10px; }
  .navbar .price {
    margin: 17px 15px 17px 10px; } }