const NavWrapper = styled.div`
  display: flex;
  width: 100%;
  z-index: 99999;
  flex-direction: column;
  background-color: white;
  border-bottom: 1px solid #ccc;
  position: ${props => (props.isFirstChildScrolled ? 'fixed' : 'inline-block')};
  top: ${props => ((props.isFirstChildScrolled && props.isDownScroll) ? '-100px' : (props.isFirstChildScrolled && !props.isDownScroll) ? '0px' : null)};
  transition: ${props => (props.isFirstChildScrolled ? 'all' : 'none')};

  ${devices.desktop`
    font-size: 4.0em;
    min-height: 100px;
 `};
`;