Responsive fixed menu

Question

I have a fixed menu that when viewed in the maximized browser everything happens perfectly however, when the screen decreases, the menu is fixed and the scroll bar does not scroll it, it is possible to solve this only with CSS?

follows my CSS code from the menu:

{
z-index: 297;
height: 80px;
border-style: solid;
border-color: #7F7F7F;
background-color: #FFFFFF;
position: fixed;
top: -1px;
border-width: 0px 0px 1px;
}

Answer 1

in your style sheet:

@media (max-width: 600px) {
  .menu {
    position: relative;
  }
}

where the max-width is the maximum length where these rules apply, in which case the menu above 600px will no longer have position: relative;

(https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)