Submitted about 2 years ago

Responsive Dropdown Navigation using REACT & Styled Components

#react#styled-components

DanielK• 440

@DanK1368

Preview site View code

This is a solution for...

Intro section with dropdown navigation

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.

I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)

Community feedback

Byron• 2,180

@byronbyron

Posted almost 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

DanielK• 440

@DanK1368

Posted almost 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

Prabhash Ranjan• 2,540

@besttlookk

Posted about 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

DanielK• 440

@DanK1368

Posted about 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.

Prabhash Ranjan• 2,540

@besttlookk

Posted about 2 years ago

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

DanielK• 440

@DanK1368

Posted about 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.

DanielK• 440

@DanK1368

Posted about 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..

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord