Search code examples
htmlcssfixedsticky

Problem in creating a sticky/fixed nav bar using css

I'm making a website where the top bar needs to be sticky where it is currently. normal page

Please check the code on my git hub repository because its too big to accommodate my github repository

basically I know that we can do it in 2 ways by making the div tag position: fixed; or position: sticky, but neither of them is working. position: fixed;

position: sticky

Solution

  • To solve this you can simply use:

    .sticky{
    position: fixed;
    top: 0;
    width: 100%;
}

    position and top is already explained by other user but width is also required to keep the navbar's original form or else the navbar's components becomes disfigured as it loses its position.

    In Your first picture we can see that the components have become disfigured