Skip to content
Submitted over 2 years ago

Intro section with dropdown navigation

👾 Ekaterine Mitagvaria 👾•7,860
@catherineisonline
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello, Frontend Mentor community! This is my solution to the Intro section with dropdown navigation.

I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

Thank you

Code

Please log in to post a comment

Log in

Community feedback

  • engahmedhusseinn•60
    @engahmedhusseinn

    Hi Ekaterine,

    That is a great project, I can't find no bad side in it. Everything is clean, good work! very good work Great project, I just have 2 minor stylistic comments that I think would be helpful. use vue js use vutify

    This will help you in rapid work and development without any time and effort, write much shorter code, and improve the performance of your site.

    But you did a very good job, of course, very excellent and wonderful

  • Andrew•130
    @FeelsGo-od

    Hi Ekaterine,

    That is a great project, I can't find no bad side in it. Everything is clean, good work!

  • Marcos Aurelio•130
    @marcosaureliosl

    Muito bom o trabalho, parabéns.... achei perfeito, bem dinâmico, semântica boa demais.

  • Aruj Joshi•290
    @gtalin

    Hi @catherineisonline. Congratulations on completing this challenge. Your solution looks amazing.

    I do have a few suggestions on how you can improve the solution further:

    • Right now the dropdown navigation shows only when a user hovers over it. A lot of users don't like using a mouse and just use keyboards. To make the menu more accessible for them, you can cause the dropdown to show on focus (you'll have to use the property focus-within. I consulted this link for creating keyboard accessible dropdown menu while doing this challenge. Hope you find it useful as well.

    • Second suggestion is that you have used a max-width for the main container which prevents it from stretching out. You can use the same for the nav as well. Right now for very large screens, the nav bar stretches out considerably.

    Hope you find the feedback helpful. All the best for your future challenges.

  • Thabiso•270
    @SefalaThabiso

    This has been giving me a challenge for weeks now😭 . Your solution looks amazing. I would like to get your thought process on how you got to the solution 😅.

    Great job👌🏾

  • ERIC•600
    @ricoom

    Hello Ekaterine, Congratulations!! you aced this challenge. I have some insights that may help you.

    • in your media query use 375px as max-width to ensure responsiveness in mobile devices. -Reduce the font size of your intro header on small devices. nevertheless, I do love the idea of a sticky hamburger, on scroll. good job!
  • faizan•2,420
    @afaiz-space

    Hey @catherineisonline,

    • if not provide any hyperlink in the anchor tag. then use # ex (<a href="#">Todo List</a>)
    • add line-height: normal; in the button element.
    • replace min-width:1000px; with min-width:1200px; in the main element.
  • P
    Mina Makhlouf•1,150
    @Minamakhlouf

    Hi Ekaterine,

    Great project, I just have 2 minor stylistic comments that I think would be helpful.

    1. When the menu is dropped down, it hugs the navigation menu too tightly. I would advise that you create some small space between the navigation and the menu that is dropped down. You can either do it by increasing the value that it is offsetted from the top or just use transform: translateY() and give it a larger value.
    2. There also seems to be a scrolling issue. When I view this on Google Chrome, the bottom portion of the website is cut off and there doesn't seem to be a scrolling option to see them. So I can't see the padding at the bottom or the icons. To fix that you might have to look at how you set the overflow property.

    Hope you found this feedback helpful.

    Aside from that, very well done.

  • Account deleted

    • From User Experience Perspective

    • Problem::

    • In mobile version, inside [Menu List] when I hover over [Features] it opens list and increase in size due to which the position of [Company List] goes down and when I go down the [Feature List] and get past the last item in [Feature List], the [Feature List] shrinks, taking the [Company List] and [Feature List] back to its position before hover state and User has to hover over [Company List] by bringing the cursor from bottom of the [Menu List] and it becomes irritating to go up and down again again to see these lists.

    • Solution::

    • I think it would be better if there is a delay for closing [Feature List] so that User has time to go over [Company List].

    • I am not as good as you are and I learn from your projects and get inspiration from you.

    • I hope You find this UX feedback useful.

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