Responsive Dropdown Navigation using REACT & Styled Components

Community feedback

• 

  Byron•2,290

  @byronbyronPosted over 2 years ago

  @DanK1368 Hia mate.

  Try position: fixed; instead of position: absolute;, to fix the scrolling issue.

  @media screen and (max-width: 670px) {
      .ggprRt {
          /* position: absolute; */
          position: fixed;
          top: 0px;
          left: 0px;
          height: 100vh;
          background-color: rgba(0, 0, 0, 0.5);
          transform: translateX(110%);
          opacity: 0;
      }
  }
  

  Marked as helpful

  0

  ---

  

  DanielK•440

  @DanK1368Posted over 2 years ago

  @byronbyron Oh wow..you're my hero haha. I somehow couldn't figure out the issue. Can you explain to me why it behaves that way though? Shouldn't overflow: hidden, also hide an absolutely positioned element

  0
• 

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  HI, Nice work! Here are some points i like to make

  • Its not responsive for all screen size. When ever develop anything ake a habbit of making responsive even if it is not asked for.
  • Dropdown menu should close when clicking outside the dropdown.

  I also made this using styled-component. Here is the link if you want any refernce

  https://intro-section-with-dropdown-navigation-phi.vercel.app/

  Feel free to drop your feedback.

  Good luck,

  Happy coding

  0

  ---

  

  DanielK•440

  @DanK1368Posted over 2 years ago

  @besttlookk Thanks for your input. You're right, it would be better to have it closed when clicking outside the dropdown.

  By the way, I cant seem to figure out why when viewing the site on my mobile device i can scroll beyond the content (to the right, as well as down). I set overflow to hidden.

  0

  

  Prabhash Ranjan•2,540

  @besttlookkPosted over 2 years ago

  @DanK1368 For me it shows no scrolling in any screen-size.

  0

  

  DanielK•440

  @DanK1368Posted over 2 years ago

  @besttlookk mhmm..If you are viewing on desktop and scale the browser down to a mobile width, it works as intended. But if use my cellphone i can somehow scroll down. It's the same issue if I use the responsive view in the browser and set enable the touch simulation then I can also scroll.

  0
• 

  DanielK•440

  @DanK1368Posted over 2 years ago

  I also just realized, that when viewing the site on mobile you can scroll beyond the content ( right and down ) . I'm not sure why that is..

  0