Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted about 3 years ago

Intro section with dropdown navigation

jquery
Vani•160
@VANIMEHTA
A solution to the Intro section with dropdown navigation challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I have used jquery in this project and my site was working perfectly fine before deploying it. ie all the dropdown menu and active states were working. But none of this feature is working after deploying Can someone pls help with this!

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Sean Red•635
    @seanred360
    Posted about 3 years ago

    I have fixed the issue with your dropdown menu. Please check my pull request on GitHub to merge the changes. The problem was you have deprecated jQuery code, you need to use the new syntax or it won't work correctly. You can go to the GitHub page and click on the Issues tab, next to <> Code and Pull Requests to see the bugs I have found and how to fix them.

    Marked as helpful
  • NotBenjamin•70
    @Aeteung
    Posted about 3 years ago

    Try to use a closing tag instead of a self-closing tag for the script tag

  • Tesla_Ambassador•3,070
    @tesla-ambassador
    Posted about 3 years ago

    Hey Vani, congratulations on completing this challenge, it looks pretty solid! 💪 Here's a few pointers that could be useful:

    • I looked through your code and ran it on github desktop to findout what the jQuery problem was, sadly I couldn't figure it out because it also ran on mine and if I am being honest, I have used very little jQuery but once I come up with a solution, I will notify you!
    • In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.
    • You need to add an alt text to your images. This is because it tells the browser what image is being displayed and this can also help those using screen readers to know what image is being displayed on the website. It will also clear some of your HTML validation issues and accessibility issues

    Happy coding and keep up the great work! 👍

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub