Two Navbar rows in React-Bootstrap-CodePudding

I am trying to mimic this Navbar:

In React-Bootstrap, I am thinking of having two Navbars both on top of each other, for this I have added these files:

MainNav.tsx

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function MainNav() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
      <Nav className="me-auto">
        <Navbar.Brand href="#home">Minimal Blog</Navbar.Brand>
      </Nav>
    </Navbar>
  )
}

Navbar.tsx:

import React from 'react';
import { Navbar, Container, Nav } from 'react-bootstrap';

export default function NavigationBar() {
  return (
    <Navbar expand="md" className="justify-content-center navbar-top" fixed="top">
        <Nav className="me-auto">
          <Nav.Link href="#home">Blog</Nav.Link>
          <Nav.Link href="#features">About</Nav.Link>
        </Nav>
    </Navbar>
  )
}

And in the App.tsx, I am just adding these:

<MainNav />
<Navbar />

But seems like they are super imposing on each other, I have created a code sandbox here: https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx for Replication, any help/hints in making the desired output possible will be helpful.

EDIT 1: I have added two Navbars, and utilised the z-index property, but somehow, I am not able to align contents together. Here is the sandbox link: https://codesandbox.io/s/peaceful-sun-se4ni?file=/src/App.tsx

CodePudding user response：

the problem is that both of these navbars has the CSS property of position: fixed; so they are intertwining with each other to fix the issue you can override the CSS property by giving elements a class that would have a position:unset property

CodePudding user response：

In app.tsx You're importing NavigationBar but you're writing You don't need two navbars, you need one navbar and align the elements that you on the right.

Check these examples https://getbootstrap.com/docs/4.0/components/navbar/#containers

I think you need mr or something like that.

CodePudding user response：

With regards to EDIT 1, you have a container wrapped around your main nav and not in the second component. That's what is causing the alignment issue.