How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4?

Question

I am trying to get this hamburger to ignore my shopping cart and login buttons. I have forced the collapsed menu view on all screen sizes in this snippet so you can see how it is not working they way I want.

What I want: A. For xs screen sizes: Click the hamburger, and the Home, Collections, and Categories links drop down, but the logo (spongebob as a placeholder), Login button, and Cart stay up at the top. B. For sm-xl screen sizes: Logo, Home, Categories, Collections (then right hand) Login, Cart.

Everything works the way I want, except the Cart and Login drop down with the hamburger instead of staying up top with the logo.

The reason the logo stays on top is because the logo is written in before div which initiates the collapse (id="oaNavbar"). This div contains an unordered list of nav items.

The problem is the ANYTHING I add AFTER the unordered list gets thrown into the hamburger drop-down. I want the login and cart to stay up top.

You might say, "Just move the cart and login buttons to an area before the "oaNavbar" because that's where the logo is, and it is behaving." The problem with that, is that on larger screens, it looks really gross to have Logo, Login, Cart, Home, Collections, Categories.

Is there any way to get cart and login to stay put?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

  <!-- Additional CSS must be placed after Bootstrap CSS -->
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css" />
  <link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css" />
  <link rel="stylesheet" href="node_modules/bootstrap-icons/package.json">
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster|Open+Sans" /> -->
  <link rel="stylesheet" href="css/styles.css" />

  <title>Document</title>
</head>


<body>

  <!-- Nav Bar -->
  <nav class="navbar navbar-expand-xl navbar-light bg-white sticky-top ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            
    <a class="navbar-brand mr-auto" href="#"><img src="https://clipground.com/images/spongebob-png-icons-8.jpg" width="50" style="padding-left: 12px" /></a>
    <div class="collapse navbar-collapse" id="oaNavbar">
      <ul class="navbar-nav" style="padding-left: 5px">
        <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
        <li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
        <li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
      </ul>
    </div>
    
    <!-- Login button -->
    <div class="navbar-text ml-auto">
      <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
    </div>

    <!-- Shopping Cart -->
    <a class="btn" href="cart.html"><img src="https://clipground.com/images/icon-cart-clipart-2.jpg" style="width: 30px"></a>

  </nav>

  <!-- styling links -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>

</html>

score 1 · Answer 1 · answered May 18 '21 at 05:14

I have added "col-sm-2 fixed-top" to the second div.

<!-- Login button -->
        <div class="navbar-text ml-auto col-sm-2 fixed-top">
            <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal"
                data-target="#loginModal">Login</button>

            <!-- Shopping Cart -->
            <a class="btn" href="cart.html"><img src="https://clipground.com/images/icon-cart-clipart-2.jpg"
                    style="width: 30px"></a>
        </div>

score 1 · Accepted Answer · answered May 20 '21 at 16:38

I figured it out with the help of Viswanatha Swamy.

Unfortunately, the col-sm-2 fixed-top did some unwanted things like shoved my cart and login button too far to the top, and some strange container-related things at different sizes. But it did fix the buttons on the outside of the hamburger.

I looked at the CSS behind Bootstrap's col-sm-2 and fixed-top. I ended up writing my own CSS to fix this.

I wrapped both buttons in a single div and added this CSS:

.loginFixed {
position: fixed;
top: 0;
right: 0;
left: auto;
z-index: 1030;
margin-top: 15px;
}

I needed the margin-top because a fixed top: 0 results in squishing at the VERY top, and any value for top results in the buttons falling down with the hamburger.

I added a margin-top to compensate for the top: 0 tightness.

The final button setup looks like this in HTML:

<div class="navbar-text loginFixed">
    <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>
                

    <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
</div>

And the whole menu looks like this:

<nav class="navbar navbar-expand-sm navbar-light bg-white sticky-top ">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#oaNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>

    <a class="navbar-brand mr-auto" href="#"><img src="img/logo-md-white.png" width="180" style="padding-left: 12px"/></a>
    <div class="collapse navbar-collapse" id="oaNavbar">
            <ul class="navbar-nav" style="padding-left: 5px">
                <li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="collections.html"> Collections</a></li>
                <li class="nav-item"><a class="nav-link" href="categories.html"> Categories</a></li>
            </ul>
        </div>
  
    <div class="navbar-text loginFixed">
        <button class="btn btn-outline-dark btn-md" role="button" data-toggle="modal" data-target="#loginModal">Login</button>

        <a class="btn" href="cart.html"><i class="fa fa-shopping-cart fa-lg"></i></a>
    </div>
</nav>

How to ignore items in menu collapse with a left-hand hamburger for Bootstrap 4?

2 Answers2