Bootstrap 4 Responsive menu - add items on collapse

Question

I have a main menu on my site using Bootstrap 4's navbar.

I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.

See Codepen Below...

https://codepen.io/anon/pen/KeXZJL

  <div class="social-navbar clearfix">
     <ul class="social-icons">
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
     </ul>
     <ul class="login float-right">
        <li class="join"><a href="#">Join Now</a></li>
     </ul>
  </div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <a class="navbar-brand" href="#">LOGO</a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarMain">
        <ul class="navbar-nav ml-auto">
           <li class="nav-item active">
              <a class="nav-link" href="#">Item 1</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 2</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 3</a>
           </li>
          <li class="nav-item active">
              <a class="nav-link" href="#">Item 4</a>
           </li>
        </ul>
     </div>
  </nav>

https://codepen.io/anon/pen/KeXZJL

Is this possible?

As a fast hack I thought of adding everything to menu and just hiding the mobile menu elements on not mobile screens( min-width : 992px ?? or whatever you chose) — seethrough

Avanika Krishnaswamy Avanika Krishnaswamy · Accepted Answer · 2018-06-18T22:04:10

You can add this javascript at the very end of the BODY tag:

<script>

    var x = window.matchMedia("(max-width: 465px)")

    function mobileMenu(x) {
        if (x.matches) { 
            document.getElementById("navbarMain").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "inherit";

        } else{
            document.querySelector("body").prepend(
                document.querySelector(".social-navbar")
            );

            document.querySelector(".social-navbar").style.backgroundColor = "#000";
        } 
    }

    mobileMenu(x) 
    x.addListener(mobileMenu)   


</script>

When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.

Bootstrap 4 Responsive menu - add items on collapse

1 Answers