How do I position my React component beneath the navbar (so that the navbar doesn't overlap it)?

Question

I'm trying to build a React 16.13.0 application, which is laid out in a fairly simple way -- the nav bar on top and the component below...

  return (<Router>
    <div className="App">
      <Flash />
      <nav className="navbar navbar-expand-lg navbar-light fixed-top">
        <div className="container">
          <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
          <NavBar />
        </div>
      </nav>

      <div className="auth-wrapper">
        <div className="auth-inner">
          <Switch>
            <Route exact path='/' component={Add} />
            <Route path="/add" component={Add} />
            <Route path="/search" component={Search} />
          </Switch>
        </div>
      </div>
    </div>
    </Router>
  );

I have created the following styles for the different sections...

.navbar-light {
  background-color: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 450px;
  margin: auto;
  background: #ffffff;
  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

However, the nav bar is overlapping the component. Demo can be seen here -- http://prod.chicommons.coop , or this screen shot

How do I adjust things so that my component appears below the nav bar and is completely visible (it's fine if you have to scroll)?

Answer 1

You need to change position property from file scss/utilities/_position.scss . It can be either position:sticky or position:initial or anything except absolute or relative.

eg:-

.fixed-bottom, .fixed-top {
position: initial;
right: 0;
left: 0;
z-index: 1030;
}

Answer 2

The fact that you have position: fixed on your Navbar, your auth-wrapper DOM element starts from the top

There are now multiple solutions to these depending on how you want your Navbar to behave

Since you would like a Navbar sticking to the top and not scrolling with the rest of the DOM, you could make it position: sticky instead of position: fixed and add a small padding to your authWrapper to give enough space on top

Since you are using bootstrap class fixed-top for now. I suggest you replace it with your own custom class

 <nav className="navbar navbar-expand-lg navbar-light navbar-fixed-top">
    <div className="container">
      <Link className="navbar-brand" to={"/add"}>Chicommons</Link>
      <NavBar />
    </div>
  </nav>


.navbar.navbar-fixed-top {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
}

.auth-wrapper {
  padding-top: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

the above solution will however lead to your Navbar looking out of place when you scroll to the end of the page

A better solution here would be to use position: fixed instead of position: sticky and add a padding-top or top css to auth-wrapper

.navbar.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

.auth-wrapper {
  padding-top: 6rem; // enough space towards the top to be not overlapped by navbar
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

Answer 3

you have given fixed-top class to your nav. it will cause it to overlap everything (like it has no height for the other elements). Remove the fixed-top class and then if you want, add it to your navbar after scrolling so it would stick to the top when the user scrolls down. (You can also give a little margin-top to your form so it would not stick to your nav to become more beautiful.)

Answer 4

use position: sticky; instead of position: fixed; on this class .fixed-bottom, .fixed-top