I am currently working on space website project, which involves various navigation links for different sections of the site. Each of these navigation links corresponds to a different section, such as "Home," "Destinations," "Crew," and "Technology."

I have been trying to achieve a visual effect where the background of the active navigation link changes to a different image or color to indicate the current section the user is on. For instance, I'd like the "Home" link to have a space-themed background when it's the active link, and a different background for the "Destinations," "Crew," and "Technology" links when they are active.

However, despite several attempts, I have been unable to implement this feature successfully. The background of the active link remains the same for all sections.

Steps to Reproduce:

1. Navigate to the website.
2. Observe the navigation links.
3. Click on different sections like "Home," "Destinations," "Crew," and "Technology."
4. Notice that the background for the active link remains the same, regardless of the section.

Expected Behavior:

I expected that when I click on a specific section link (e.g., "Home"), the background for that link would change to a unique image or color, indicating the active section.

Actual Behavior:

The background for the active link does not change, and it remains the same for all sections.

Additional Information:

• I have tried implementing this using CSS and JavaScript but have not been successful.
• I have also reviewed the code and ensured that each navigation link is correctly associated with its respective section.
• It would greatly enhance the user experience and visual appeal of the website if we could achieve this feature successfully.

Screenshots:

Crew background should be :

Home background should be :

And for others bg images present in the imgAssets folder of his name directory named to its list-bg.jpg or other format