Top menu make it remain in one place

HTML-CSS
1

I have this problem. How can I make an element stay in one location like a top menu. Everytime i change the resolution top menu is moving which is annoying af.

Heres my body style that have a position relative

body {
  font-family            : "Open Sans" !important;
  -webkit-font-smoothing : antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior        : smooth;
  line-height            : 1.6;
  width                  : 100%;

  position         : relative;
  background-image : url("/assets/images/pattern1.jpg");
  background-repeat: repeat;
}

Heres the top menu

 &__usermenu {
    position        : absolute;
    background-color: $dark;
    top             : -300px;
    padding         : 0 0.8rem;
    width           : 15%;
    z-index         : 2222 !important;
    right           : 100px;
    transition      : 0.3s ease-in-out all;

    &.show--menu {
      top: 51px;
    }
  }

menu1

menu2

menu3

2

Nvm i figured it out. For those who stumbled with this problem as well

Heres the solution setting the right to percent;

&__usermenu {
right : 10%;
}

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.