CODEWITHSUNDEEP
css
poldeeek
poldeeek

Reputation: 333

sticky position CSS React

I don't know why position: sticky doesn't work on my website. Position: fixed works, but then my navbar and leftMenu are hidden under others components..

CSS

.NavBar{
    padding: 0 15px 0 0px;
    background-color: #6E81FB;
    margin: 0px;
    box-sizing: border-box;
    height: 70px;
    text-align: left;
    display: flex;
    line-height: 70px;
    align-items: center;
    border-bottom: 2px solid #575353;
    position: sticky;        
}


.UnloggedLeftMenu{
    height: calc(100vh - 70px);
    width: 70px;
    background-color: #6E81FB;
    padding: 20px 0 0 0;
    border-right: 2px solid #575353;
    box-sizing: border-box;
    position: sticky;        
}

first_pic enter image description here

Upvotes: 0

Views: 625

Answers (1)

Nachiket Bhosale
Nachiket Bhosale

Reputation: 106

@poldeeek, you should not use position: sticky in your case because it does not involve toggling between relative and fixed positions.

It can easily be achieved by position: fixed and you would need to set the z-index in order to push the elements above the rest.

Following is the CSS-

.NavBar{
    padding: 0 15px 0 0px;
    background-color: #6E81FB;
    margin: 0px;
    box-sizing: border-box;
    height: 70px;
    text-align: left;
    display: flex;
    line-height: 70px;
    align-items: center;
    border-bottom: 2px solid #575353;
    position: fixed;  
    top: 0;
    left: 0; right: 0; //To stretch the navbar full width    
    z-index: 99;
}

.UnloggedLeftMenu{
    width: 70px;
    background-color: #6E81FB;
    padding: 20px 0 0 0;
    border-right: 2px solid #575353;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 70px; bottom: 0; //To take the height excluding header; No need to specify height explicitly
    z-index: 99;        
}

body {
    padding: 70px 0 0 70px; //To avoid hiding of main content
}

Hope this helps!

Upvotes: 1

Related Questions