How to make a header fixed but without it being outside of flow?

So I have hero and header components in react. I made header fixed but that way it goes outside of flow, so hero components overlays it. It looks like this:

I want to make the header fixed, but also make it be on top of the page. The hero component’s position is static as usual.

Header css:

    @include flex(center, space-between);
    position: fixed;
    cursor: pointer;
    padding: 20px 0px;
    width:100%;
    background-color: transparent;
    height: $header-height;

Hero css:

 @include flex(center, center);
    flex-direction: column;
    width:100%;
    min-height:100vh;
    padding: 30px 0px;
    background-color: $body-bg;

I know it looks like a basic thing to do, but I can’t figure it out, I tried making header relative, but that way it’s not fixed. And making hero relative makes it overlay header.

>Solution :

Add this to nav section.

  position: sticky;
  top: 0;