Overflow: hidded doesn't work when hiding an absolute positioned div

Question

I just recreated the Dev Ed's hamburger navbar, but it doesn't work as expected. The full code is here. I tried to set position:relative on the nav-links container, but that didn't help. What can I do? (The code works if in the pc chrome, but try the website with the dev tools responsive mode, you'll see that the nav-links are visible...) Please help me! Some code (but it doesn't work):

  body {
    overflow-x: hidden;
  }
  nav {
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;

Does this answer your question? [CSS overflow hidden with absolute position](https://stackoverflow.com/questions/3225102/css-overflow-hidden-with-absolute-position) — Roope, Dec 08 '19 at 20:39
I tried your codepen and didn't see anything weird, what's the result that you called "expected"? — Loi Nguyen Huynh, Dec 09 '19 at 04:53

score 1 · Accepted Answer · answered Dec 09 '19 at 02:18

try this

body {
    overflow-x: hidden;
  }
  nav {
position:relative;
  }
  .nav-links {
    position: fixed;
    right: 0px;
    height: 92vh;
    top: 8vh;

change the position to fixed and make the nav position relative that should do what your looking for?

Overflow: hidded doesn't work when hiding an absolute positioned div

1 Answers1