Reputation: 3729

Collapsing navbar moves uncollapsable items away from navbar

I have this navbar:

Where the army of shopping carts should not be collapsed if the screen is made smaller:

So far, so good...

However, when I click the toggle button, my army of shopping carts is also moved down with the menu, like this:

But I want my army of shopping carts, to stay up as well, like in this image (painted for now):

I've looked for a few hours now, and still can't achieve this behaviour. Here is the fiddle.

Code:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">English Park Cuisine</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Meniu
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="meniu.php">Pizza</a>
                    <a class="dropdown-item" href="#">Paste</a>
                    <a class="dropdown-item" href="#">Supe</a>
                    <a class="dropdown-item" href="#">Ciorbe</a>
                    <a class="dropdown-item" href="#">Desert</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <p class="dropdown-item">0746117702</p>
                    <p class="dropdown-item">0742112452</p>
                    <p class="dropdown-item">0735212352</p>
                </div>
            </li>
        </ul>
    </div>

    <div class="d-flex order-lg-1 ml-auto pr-2">
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>           
    </div>

</nav>

The question is very similar to this one, however, you don't see this behaviour there because the order of the navbar is different, which is what makes this question unique.

Upvotes: 1

Answers (2)

Shidersz

Reputation: 17190

You can approach this using order-* classes. Just keep the order value of the items you want to keep on the top navbar lower than the value of the button that toggle the collapsed mode. In the next example:

(1) When navbar is not collapsed (lg screens) the army of shopping carts will have order-4 and go last.

(2) When navbar is collapsed, the army of shopping carts will have order-1 and the toggle collapsing button will have order-2. So the collapse button will not affect it.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

  <a class="navbar-brand order-0" href="#">English Park Cuisine</a>

  <div class="order-lg-4 order-1 ml-auto mr-2">
    <a href="#" class="navbar-text">
      <i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
    </a>
    <a href="#" class="navbar-text">
      <i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
    </a>
    <a href="#" class="navbar-text">
      <i class="fa fa-shopping-cart fa-lg" style="color: white;"></i>
    </a>
  </div>

  <button class="navbar-toggler order-2" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse order-3" id="navbarNavDropdown">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="index.php">
          Acasa<span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Meniu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="meniu.php">Pizza</a>
          <a class="dropdown-item" href="#">Paste</a>
          <a class="dropdown-item" href="#">Supe</a>
          <a class="dropdown-item" href="#">Ciorbe</a>
          <a class="dropdown-item" href="#">Desert</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <p class="dropdown-item">0746117702</p>
          <p class="dropdown-item">0742112452</p>
          <p class="dropdown-item">0735212352</p>
        </div>
      </li>
    </ul>
  </div>

</nav>

Upvotes: 1

doğukan

Reputation: 27381

try this:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">English Park Cuisine</a>

    <div class="d-flex order-lg-1 ml-auto pr-2" style="margin-right:20px;">
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>
        <a href="#" class="navbar-text"><i class="fa fa-shopping-cart fa-lg" style="color: white;"></i></a>

    </div> 
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                <a class="nav-link" href="index.php">Acasa<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Meniu
            </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="meniu.php">Pizza</a>
                    <a class="dropdown-item" href="#">Paste</a>
                    <a class="dropdown-item" href="#">Supe</a>
                    <a class="dropdown-item" href="#">Ciorbe</a>
                    <a class="dropdown-item" href="#">Desert</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <p class="dropdown-item">0746117702</p>
                    <p class="dropdown-item">0742112452</p>
                    <p class="dropdown-item">0735212352</p>
                </div>
            </li>
        </ul>
    </div>



</nav>

Upvotes: 1

Collapsing navbar moves uncollapsable items away from navbar

Answers (2)

Related Questions