如何将菜单改为响应式的Bootstrap菜单

Question

我想在CodePen示例中使用Bootstrap 5响应式菜单，我尝试了几种方法，但总是出现问题。

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

我想使用Bootstrap菜单替换当前的菜单，以便在大屏幕上菜单可以响应并且悬停时有动画效果。

<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>

- Learning

---

您希望在较小/移动屏幕上看到的菜单是什么样子？ - Carol Skelly

@Zim 作为带有顶部标志的 Bootstrap 可折叠菜单。 - Learning

Answer 1

这是使用Bootstrap 5.0中心放置标志的导航栏版本，适用于较大的显示器。

更新

在我的原始答案中，我使用了两个徽标来作弊布局，一个用于移动设备，另一个用于更大的显示器，以使用“justify-content-evenly”获取四个链接和徽标周围的间距，以与原始请求匹配。这确实提供了所有项目之间以及浏览器边缘和第一个和最后一个项目之间的相等空间，但它具有重复内容。

在我的更新中，我使用一个徽标，并将链接分成两个navbar-collapse列表。将链接拆分为两个独立的navbar-collapse列表提供了一个位置，在大屏幕上可以放置徽标。我使用“order:2”将徽标从小屏幕导航栏的左侧移动到较宽的屏幕中间。

两个navbar-collapse div设置为使用flex-grow-1扩展以适应可用空间。导航栏折叠div中的

列表设置为“w-100”和“justify-content-evenly”，以使两个链接分开放置。

由于有两个navbar-collapse div，我修改了navbar-toggler按钮，使用class值替换了id的data-bs-target，并在“aria-controls =“navbarContent1 navbarContent2””中列出了两个navbar-collapse div的id，并在两个id之间加入空格。

虽然原始问题是关于使Bootstrap 5导航栏与示例匹配，但我还修改了Green Sock动画（GASP）的设置：

1.添加了加载、调整大小和方向的侦听器以配置或重新配置gasp设置。

2.从innerWidth切换到document.documentElement.clientWidth - innerWidth包括滚动条在内的宽度，如果有滚动条，就会将blob向右移动。clientWidth避免这个问题。

3.修改了blob的svg路径-原始路径有点不均匀。

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>

我用同样大小的占位图替换了原始图像。

如何处理移动菜单的单独菜单项取决于另一个问题的答案：Bootstrap 4带中央品牌以及左、中、右链接的导航栏。

- Rich DeBourke

Answer 2

你可以像下面的代码片段一样为桌面和移动设备创建单独的导航。

感谢我之后再说吧。

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>

- Mohd Salman

Answer 3

也许这可以帮助到您

• 我在媒体查询（767px）中添加了jQuery和CSS

• 我制作了一个弹出式动画菜单，点击菜单栏即可显示。

• 您的导航栏HTML结构不适合制作响应式菜单，因此我为移动设备添加了额外的菜单以实现响应式效果。

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>

- Satish Modha