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 behaviour 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>