How to change menu to responsive bootstrap menu

Question

I want to use bootstrap 5 responsive menu in the example shown in codepen, i tried few thing but it keeps breaking one way or the way.

https://codepen.io/KGuide/pen/WNogyyV

I want to use bootstrap menu and replace the current one, so that menu is responsive with animation on hover for large screens.

<nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Offers</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, {xPercent: -50, x:innerWidth / 2}); nav.addEventListener("mousemove", function(e){ gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'}); }); nav.addEventListener("mouseleave", function(e){ gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`}); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <div class="containerx nav-container"> <nav> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <:[endif]--> <.-- <nav class="navbar navbar-expand-lg navbar-light p-5"> <div class="container"> <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Offers</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> </div> </div> </nav> --> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https.//www?arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt=":.."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https.//www?arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>

Answer 1

Here's a version of your page using the navbar from Bootstrap 5.0 with the logo in the center for larger displays.

Update

In my original answer, I cheated on the layout by using two logos, one for mobile and one for larger displays to get the spacing around the four links and the logo to match the original request by using 'justify-content-evenly.' That did provide equal spaces between all of the items as well as between the edge of the browser and the first and last items, but it had duplicate content.

In my update, I use one logo and split the links between two navbar-collapse lists. Splitting the links into two separate navbar-collapse lists provides a place in the middle for the logo on large screens. I use order: 2 to move the logo from the left side of the navbar on small screens to the middle on wider screens.

The two navbar-collapse divs are set to expand to fit the available space using flex-grow-1. The ul lists in the navbar-collapse divs are set to w-100 and justify-content-evenly to space out the two links.

Because there are two navbar-collapse divs, I modified the navbar-toggler button to use a class value for data-bs-target rather than an id, and listed the ids for the two navbar-collapse divs for aria-controls="navbarContent1 navbarContent2" with a space between the two ids.

While the original question was about getting a Bootstrap 5 navbar to work to match an example, I also modified the setup for the Green Sock animation (GASP):

• Added listeners for load, resize, orientation to configure or reconfigure the gasp setup.
• Switched from innerWidth to document.documentElement.clientWidth – innerWidth includes the scrollbar in the width, which shifts the blob towards the right if there is a scrollbar. clientWidth avoids the problem.
• Revised the svg path for the blob – the original was a little uneven.

 const nav = document.querySelector(".navbar"); const blob = document.querySelector("svg.nav-blob"); function initiateBlob() { gsap.set(blob, { xPercent: -50, x: document.documentElement.clientWidth / 2 }); } nav.addEventListener("mousemove", function(e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: 'auto' }); }); nav.addEventListener("mouseleave", function(e) { gsap.to(blob, { duration: 0.1, x: document.documentElement.clientWidth / 2, overwrite: 'auto' }); }); window.addEventListener('load', initiateBlob, false); window.addEventListener('resize', initiateBlob, false); window.addEventListener('orientationchange', initiateBlob, false);

 body { font-family: "Open Sans Condensed"; background: black; } h1 { font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600; }.logo { max-width: 160px; } a.nav-link { color: black; text-decoration: none; font-size: 20px; font-family: "Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; }.navbar-nav.nav-link { padding-left: 1rem; } svg.nav-blob { position: absolute; top: 100%; left: 0; height: 20px; z-index: 1; display: none; } svg.nav-blob path { fill: white; } @media (min-width:768px) {.sr-md-only { position: absolute; left: -10000px; top: auto; overflow: hidden; } a.nav-link { line-height: 70px; }.nav-item { width: 6.75rem; text-align: center; }.navbar-expand-md { justify-content: space-evenly; } svg.nav-blob { display: block; }.card-img, .card-img-top { border-top-left-radius: 0; border-top-right-radius: 0; } }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-light navbar-expand-md bg-white"> <div class="container-lg"> <a href="/" class="navbar-brand mx-md-0 p-2 d-block order-md-2"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" alt="Logo image" /></a> <button class="navbar-toggler me-3" type="button" data-bs-toggle="collapse" data-bs-target=".navbarContent" aria-controls="navbarContent1 navbarContent2" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="navbarContent1" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-1"> <ul class="navbar-nav w-100 justify-content-evenly"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">HOME</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DINE</a> </li> </ul> </div> <div id="navbarContent2" class="navbar-collapse collapse flex-grow-1 navbarContent order-md-3"> <ul class="navbar-nav w-100 justify-content-evenly"> <li class="nav-item"> <a class="nav-link" href="#">HOTELS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">CONTACT</a> </li> </ul> </div> <svg class="nav-blob" viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 140 0 200 0 Z"></path> </svg> </div> </nav> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-12 col-md-6"> <div class="card bg-dark text-white text-center border-top-0"> <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image"> <div class="card-img-overlay"> <h2 class="card-title"> HEADING ONE</h2> </div> </div> </div> <div class="col-12 col-md-6"> <div class="card bg-dark text-white text-center border-top-0"> <img src="https://via.placeholder.com/670x395.png" class="card-img" alt="Placeholder image"> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-12 vh-100"> <p>Section to give height to the page.</p> </div> </div> </div>

I replaced the original images with same-size placeholder images.

How to handling the separate menu items for the mobile menu came from the answer to another question: Bootstrap 4 navbar with brand center and links on the left, center and right

Answer 2

You can make separate nav for desktop and mobile like the snippet below.

Thanks me later.

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, {xPercent: -50, x:innerWidth / 2}); nav.addEventListener("mousemove", function(e){ gsap.to(blob, {duration: 0.2, x: e.clientX, overwrite: 'auto'}); }); nav.addEventListener("mouseleave", function(e){ gsap.to(blob, {duration:0.1, x: innerWidth / 2, overwrite: `auto`}); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <div class="containerx nav-container"> <nav class="d-none d-lg-block"> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <.--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <:[endif]--> <nav class="navbar d-lg-none navbar-expand-lg navbar-light p-5"> <div class="container"> <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png" alt="Logo"/></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">DONE</a> </li> <li class="nav-item"> <a class="nav-link" href="#">HOTELS</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact</a> </li> </ul> </div> </div> </nav> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https.//www.arabnews?com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt=".:."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https.//www.arabnews?com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg.itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <!-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>

Answer 3

maybe this can help

• i add jquery & css in media(767px)

• i make popup animated menu on click of menu bar.

• your navbar html structure is not proper for make menu responsive that why i add extra menu for mobile for make responsive.

 console.clear(); const nav = document.querySelector(".nav-container"); const blob = document.querySelector(".nav-container svg"); gsap.set(blob, { xPercent: -50, x: innerWidth / 2 }); nav.addEventListener("mousemove", function (e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" }); }); nav.addEventListener("mouseleave", function (e) { gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` }); }); window.onresize = function () { gsap.set(blob, { xPercent: -50, x: innerWidth / 2 }); nav.addEventListener("mousemove", function (e) { gsap.to(blob, { duration: 0.2, x: e.clientX, overwrite: "auto" }); }); nav.addEventListener("mouseleave", function (e) { gsap.to(blob, { duration: 0.1, x: innerWidth / 2, overwrite: `auto` }); }); }; /*****For menu open*******/ $(document).ready(function () { $('.menu-btn').click(function(event) { $('.navbar-demo').toggleClass('open-nav'); }); });

 body{font-family: "Open Sans Condensed"; background: black;} h1 {font-family: "Open Sans Condensed"; font-size: 2.2em; font-weight: 600;}.c-hotel h3 {font-size: 1.2em; font-weight: 600;}.logo {max-width: 160px;}.nav-container nav { display: flex; justify-content: space-around; background:white; height:100px; }.nav-container nav a { color: black; text-decoration: none; font-size: 20px; font-family:"Roboto"; font-weight: 600; color: #358E9D; text-transform: uppercase; padding: 10px 20px 20px 20px; line-height: 70px; }.nav-container{position: relative;}.nav-container svg{ position: absolute; top:100%; left:0; height:20px; z-index: 1; }.nav-container path{ fill:white; } /*************************/.navbar-demo button.menu-btn { display:none; } header#header { display: none; } /******responsive menu css*******/ @media only screen and (max-width: 767px){ header#header { display: block; } nav.desktop-menu { display: none; }.navbar-demo button.menu-btn { position: absolute; top: 0; right: 0; background-color: unset; border: 0; font-size: 26px; display:block; padding: 15px; color: #000; outline: none; }.navbar-demo{ height:100%; z-index: 999; }.navbar-demo.nav-bar { background-color: #ffff; transition: 1s; height: 100%; position: fixed; height: 100vh; width: 100%; flex-direction: column; clip-path: circle(100px at 138% -20%); -webkit-clip-path: circle(100px at 138% -20%); transition: all 1s ease-out; pointer-events: none; }.navbar-demo.open-nav.nav-bar{ clip-path: circle(1100px at 190% -10%); -webkit-clip-path: circle(1100px at 90% -10%); pointer-events: all; }.navbar-demo { display: table; width: 100%; position: fixed; z-index: 99; }.navbar-demo.nav-bar ul li { display: block; }.navbar-demo.nav-bar ul { padding: 0; display: table; text-align: center; display:flex; flex-wrap:wrap; justify-content:center; align-items: center; margin: 0; padding: 0; }.navbar-demo.nav-bar ul li a { font-size: 18px; display: inline-block; text-align: center; text-decoration: none; color: #fff; padding: 18px; text-transform: uppercase; }.nav-bar { text-align: center; display:flex; flex-wrap:wrap; justify-content:center; align-items: center; position: relative; }.navbar-demo.nav-bar ul li a { display: block; color: #000; }.navbar-demo.open-nav button.menu-btn i:before { content: '\f00d '; }.nav-container svg { display: none; }.logo-main { background-color: white; }.container-fluid.mb-3.mt-0.p-0 { padding-top: 57px;important; } }

 <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="containerx nav-container"> <nav class="desktop-menu"> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </nav> <header id="header" class="navbar-demo"> <div class="logo-main"> <a href="#"><img class="img-fluid logo" src="https://dummyimage.com/200x70/b59ab5/fff.png&text=LOGO" /></a> </div> <div class="nav-bar"> <ul> <li> <a href="#">HOME</a> <a href="#">DINE</a> <a href="#">HOTELS</a> <a href="#">CONTACT</a> </li> </ul> </div> <button type="" class="menu-btn"><i class="fa fa-bars" aria-hidden="true"></i></button> </header> <svg viewBox="0 0 200 20"> <path class="blob" d="M0 0 C60 0 60 18 100 18 C140 18 120 0 200 0 Z"></path> </svg> </div> <div class="container-fluid mb-3 mt-0 p-0"> <div class="row gx-0"> <div class="col-lg-6 col-md-6 mb-sm-4 mb-md-0 mb-lg-0 border-0"> <div class="card bg-dark text-white text-center shadow-sm rounded-0"> <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay d-flex align-items-center"> <h2 class="card-title text-center w-100 "> HEADING ONE</h2> </div> </div> </div> <div class="col-lg-6 col-md-6"> <div class="card bg-dark text-white text-center shadow-sm rounded-0 border-0"> <img src="https://www.arabnews.com/sites/default/files/styles/n_670_395/public/2020/05/13/2103246-1947731261.jpg?itok=CYsgY2Qi" class="card-img" alt="..."> <div class="card-img-overlay"> <h2 class="card-title">HEADING TWO</h2> <.-- <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> --> </div> </div> </div> </div> </div>