Question 45928 in CSS Question posted in
Some basic documentation can be found here.

How to stick the element to the left if position sticky doesn't work? – CSS

I have a navbar that I want to position to the right when a media queries are meet:

Navbar element

.Navbar {
  @include display-flex(space-between, center, row);
  background-color: $semi-dark-blue;
  padding: 1.125rem;
  // media queries for laptops
  @include query(laptop) {
    border: 1px solid red;
    width: 100px;
    height: 100vh;
    position: sticky;
    top: 0;
    left: 0;
    @include display-flex(space-between, center, column);
  }
}

Parent element

.App {
  background-color: $dark-blue;
  margin: 0 auto;
  min-height: 100vh;
  min-width: 23.4375rem;
  overflow-y: scroll;
}

Parents parent element

html {
  min-height: 100vh;
  overflow-y: scroll;
}

I tried already to remove the overflow from parents elements as I found on the internet, but it doesn’t work for me. Does anyone see the issue?

Tags:

2

Answers


  1. 0 
     position: sticky;
 top: 0;
 left: 0;

    That is what is preventing your navbar from moving to the right.

    Login or Signup to reply.
  2. 0

    Position sticky will most probably not work if overflow is set to hidden, scroll, or auto on any of the parents of the element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search