Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro section with dropdown navigation using Tailwind and Alpine.js

#tailwind-css
Byron 2,180

@byronbyron

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello ladies and gentlemen! Here's my fantastic version of the Intro section with dropdown navigation. I've build this lovely design using Tailwind and Alpine.js and it was rather easy. I hope you enjoy looking at it! Feel free to leave a little red heart for my work, thanks! ❤️

Community feedback

DanielK 440

@DanK1368

Posted

Hi Byron, nice work. I uploaded the challenge the other day and for some reason when viewing the site on my cellphone I can scroll beyond the content. I have overflow set to hidden though. The same occurs when viewing the site in the browser using the responsive window and setting the touch simulation to enabled. When its disabled though, it works as intended. Hope you can have a look :) I used react and styled components for mine

0

Byron 2,180

@byronbyron

Posted

@DanK1368 Hia mate.

Try position: fixed; instead of position: absolute;.

@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;
    }
}
0

@dostonnabotov

Posted

that perfectly matches with the design. Great. No comments!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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