Search code examples
cssreactjsstyled-components

A little utility bar on the top of the main Navbar

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:

https://i.sstatic.net/LrXgw.jpg

And this is what happens when I add the utility bar to it:

Utility

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!

Solution

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