javascript – NavBar not behaving properly in mobile screens react

I have an issue with my navbar, the weird thing is it works properly on desktop screen but start misbehaving on mobile, the nav bar moves a bit before getting fixed instead of being fixed immediately user starts scrolling, a screenshot of the behavior below:

In the screenshot you can see the first content that seems to partly scroll with the whole content,that’s the navbar,after scrolling to that point it then assumes a fixed position making only half of the navbar visible.I use styled components for my styling below is the code for the navbar component:

export const  NavWrapper=styled.div`
color:#686869;
width:100%;
background:#ffffff;
top:0;
left:0;
position:sticky;
z-index: 100;
margin-bottom:10px;
box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
-webkit-box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
-moz-box-shadow: -1px 5px 16px -10px rgba(0,0,0,0.63);
@media only screen and (max-width: 480px) {
  box-sizing: border-box;
  position: -webkit-sticky;
  position: sticky;
  }
`;

export const Wrapper = styled.div`
width:93%;
padding-left:15px;
padding-right:15px;
display:flex;
justify-content:space-between;
align-items:center;
top:0;
left:0;

@media only screen and (max-width: 480px) {
  padding-top:8px;
  padding-bottom:8px;
  }

`;

I also tried to check if the contents where allowing an horizontal overflow, but i made sure i’m using border-boxing and the other components in the parent component had width less than 100% this the styled component for the parent component :

export const Wrapper= styled.div`
position:relative;
width:100%;
background:#f2f2f2;
min-height:750px;




:after{
    
    opacity:0.5;
}

@media only screen and (max-width: 480px) {
  padding:0;
  box-sizing: border-box;
}
`;



export const  ContentWrapper=styled.div`
width:100%;
padding:0;
`;

export const HomeContent=styled.div`
display:flex;
width:100%;

`;

export const ContentOne=styled.div`
width:26%;
@media only screen and (max-width: 480px) {
  display:none;  
}
`;

export const GigContent=styled.div`
width:40%;
padding:2%;
@media only screen and (max-width: 480px) {
   width:98%;
   padding:1px;
   
}
`;

export const Loader=styled.div`
margin-left:230px;
@media only screen and (max-width: 480px) {
 margin-left:170px;   
}
`;

the jsx:

<Wrapper>
            <NavBar image={profileImage}/>
                {state.clientGig==0?<DialogBox display={"block"} message={NO_GIGS}/>:<></>}
                {error?<DialogBox display={"block"} message={error}/>:<></>}
        <ContentWrapper>
            <HomeContent>
                <ContentOne></ContentOne>
                <GigContent>
                    {
                     loading?
                     <Loader><ClipLoader color={'#36D7B7'} loading={loading}  size={25} /> </Loader>
                     :
                    <> {state.isClient==1?<FormGig profileId={profileId}/>:<></>}
                 {
                  state.Gigs.map((item)=>(
                     <Gig  title={item.title} senderImage={profileImage} 
                     isClient={state.isClient} id={item.id} profileId={profileId} 
                     userId={item.client} tags={item.tags} 
                     body={item.about} bids={item.bids} closed={item.closed}/> 
                  ))
                 }</>
                    }
                    
                 
                </GigContent>
                <ContentOne></ContentOne>
            </HomeContent>
            </ContentWrapper>
        </Wrapper>

styling and jsx for the gig component which is also a child component in the parent component:

export const Wrapper=styled.div`
display:${(props)=>props.display || "block"};
position:relative;
width:90%;
background:#ffffff;
min-height:200px;
padding:5%;
border:1px solid #c7c7c9;
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
font-family:'Ubuntu',sans-serif;
box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
-webkit-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
-moz-box-shadow: -1px 3px 5px -2px rgba(0,0,0,0.63);
:hover{
    background:#f7faf9;
}
`;

export const Header=styled.div`
width:100%;
display:flex;
justify-content:space-between;
margin-bottom:17px;
`;

export const Title=styled.div`
width:90%;
font-size:20px;
font-weight:bold;
`;

export const CancelIcon=styled.div`
width:10%;
font-size:20px;
font-weight:bold;
`;

export const Body=styled.div`
width:100%;
margin-bottom:10px;
`;

export const Bids=styled.div`
margin-bottom:7px;
font-size:12px;
color:#49494a;
`;

export const TagsSection=styled.div`
display:flex;
width:100%;
padding:5px;
margin-bottom:17px;
`;

export const Tag=styled.div`
font-size:13px;
border-radius:25px;
background:#9c9ca1;
color:#ffffff;
margin-right:6px;
padding-top:3px;
padding-bottom:3px;
padding-left:5px;
padding-right:5px;
`;

export const Message=styled.button`
margin-top:5px;
margin-bottom:7px;
font-size:12px;
padding:6px 10px 6px 10px;
background:#3251fc;
color:#ffffff;
border:none;
border-radius:8px;
`;

export const ClosedDiv=styled.div`
color:#e34b50;
font-size:11px;
margin-bottom:7px;
`;

export const BidButton=styled.button`
width:70%;
padding:15px;
border-radius:25px;
font-size:13px;
border:none;
background:#5c5cff;
color:#ffffff;
margin-left:70px;

:hover{
    background:#4373f7;
    
}
@media only screen and (max-width: 480px) {
  margin-left:40px;  
}

`;
<Wrapper display={removeGig}>
                <Header>
                <Title>{props.title}</Title> 
                {
                   props.profileId==props.userId && props.isClient?
                   <CancelIcon onClick={()=>deleteGig()}>
                       <i class="fa fa-times" aria-hidden="true"></i>
                   </CancelIcon> 
                   :
                   <>
                   </>
                }
                </Header>
                <Body>{props.body}</Body>
                {
                    props.profileId==props.userId && props.bids.length !=0 && props.isClient ?
                <Link to={"/bidders"}
                 state={{bids:props.bids,id:curUserId,username:curUserName,senderImage:props.senderImage}}>
                <Bids>{props.bids.length} bids already</Bids>
                </Link>
                :
                <Bids>{bids.length} bids already</Bids>
                }
                {
                    props.isClient && props.profileId==props.userId?
                    <Message onClick={closeGig}>{closed}</Message>
                    :
                    <>
                    {props.closed?
                       <ClosedDiv>closed</ClosedDiv>
                       :
                       <></>
                    }
                    </>
                }
                <TagsSection>
                  {
                      props.tags.map((item)=>(
                          <Tag>{item.name}</Tag>
                      ))
                  }  
                </TagsSection>
                <>{props.isClient==0 && !props.closed?<BidButton onClick={(e)=>bidGig(e,props.id,props.userId)}>{loading?<ClipLoader color={'#36D7B7'} loading={loading}  size={20} />
                
                :<>{bidVal}</>}</BidButton>:<></>}</>
            </Wrapper> 

Leave a Comment