Skip to content
Submitted 6 months ago

Mobile-first intro section with dropdown menu

P
LaStellaa•570
@LaStellaa
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud to have completed this project with all the active states and the JS components. I would structure the HTML slightly differently next time to make my life easier with the navbar.

What challenges did you encounter, and how did you overcome them?

I adopted a mobile-first approach and one of the biggest challenges was to style the navbar for the desktop design. While the HTML structure worked very well for mobile, it gave me a headache on larger screens and I had to work around it as best as I could but it was sub-optimal. I also had some issues with the footer that was non-responsive and I could not figure out why. Lastly, the dropdown menu on large screens is not aligned due to the overflowing of the main container (bad navbar design) but I was unable to fix it.

Code

Please log in to post a comment

Log in

Community feedback

  • Jay Khatri•4,230
    @khatri2002

    Hi @LaStellaa!

    The developed solution looks great!

    Below are some suggestions for improvement to enhance user experience and fix layout shifts.

    1) Layout Shift in Dropdown Menu on Desktop

    On desktop resolution, clicking the arrow icon for "Features" and "Company" causes a major layout shift. The text moves up when the dropdown appears and moves back when it disappears. This disrupts the user experience.

    Set the dropdown menu to absolute position so it doesn’t push surrounding elements.

    .feature-list, .company-list {
    position: absolute;
}

    This ensures that dropdown visibility does not affect nearby elements.
    On mobile, you can keep the position as static.

    2) Clickable Area for Dropdown Trigger

    Currently, only the arrow icon toggles the dropdown.
    Both text and icon should be clickable.
    Also, using an <a> tag here is not appropriate, since it’s not a navigation link.

    • Wrap both text and icon inside a div and make the entire div clickable.
    <div class="dropdown-trigger">
    <span>Features</span>
    <img src="..." alt="...">
</div>

    This improves clickability and follows proper HTML semantics.

    3) Fix: Layout Shift on Hover of "Learn More" Button

    On hovering "Learn More", a slight layout shift happens.
    Why? Because a 1px border is added on hover, pushing the surrounding text.

    Instead of adding a border on hover, keep an invisible border initially and just change the color on hover.

    .btn-learn-more {
    border: 1px solid transparent;
}
.btn-learn-more:hover {
    border-color: var(--Almost-Black);
}

    This prevents layout shifts while keeping the hover effect intact.

    You're doing amazing work! Keep it up! 🚀

    Marked as helpful

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