A little utility bar on the top of the main Navbar-CodePudding

I have a main navbar with a scroll animation on my website. I wanted to created a fixed, little (and nontransparent) utility bar that would always stay on the top of my site.

This is what I have now:

I've tried multiple stuff and I have no idea how to fix this.

This is my utility navbar code:

export const UtilityNav = styled.nav`   
  background: yellow;   
  position: sticky;   
  min-height: 40px;   
  /* padding-bottom: 20px; */  
  /* margin-top: 20px; */  
  /* margin-top: -10px; */   
  display: flex;  
  justify-content: center;  
  align-items: center; 
  font-size: 1rem; 
  top: 0; 
  z-index: 10;
`;

And this is my main Navbar code:

export const Nav = styled.nav`
  background: ${({ scrollNav }) => (scrollNav ? '#81A687' : 'transparent')};
  min-height: 80px;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 8;
  transition: 0.8s all ease;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;

The negative margin-top: -80px makes the navbar transparent before scrolling down. I think this is something I need to work on, but the most logical (at least for me) change to margin-top: -110px; (NavBar height UtilityBar height) didn't work... :-( I have no other ideas. I'm looking for the easiest way, I'm completely new to this.

Thanks in advance!

CodePudding user response：

I've also tried creating a parent container to both of them, so the sticky position would work, but everything well apart when I did.

Judging by this statement, these navs in different parents, I've made a simple demo, basically, if you can't have a single parent for these navs, you must at least have them inside relative containers, this way they will not overlap.

If you change .container style to fixed or absolute positioning in the demo, you will have the same bug as you have

https://jsfiddle.net/DraGonM/yjqtms05/20/

I hope this help

CodePudding user response：

I've fixed this adding UtilityBar to my main Navbar and displayed them in the same flex container with height of 110px.

<Nav scrollNav={scrollNav}><UtilityNav>[...]</UtilityNav></Nav>

This way the whole bar sticks to the top. I still have no idea why they didn't stick to each other as seperate components, but this workaround works great for now.