Click here to Skip to main content
15,567,466 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
hi, I have a problem in changing navigation left bar colors (selected and not selected) while changing sections (4 sections website / one page) by scrolling or clicking on the bar sections. I did other changes using JavaScript while scrolling, liking switching between two logos and other changes.
The navigation works in the first and second section, but didn’t work in the the others (3 & 4)
Any help?

What I have tried:

custom.css[^]
CSS
.navigation-section-one::after{
    background: #1f1e1d !important;
}

.navigation-section-two::after{
    background: #f53d1f !important;
}

.navigation-section-three::after{
    background: #1f1e1d !important;
}
.navigation-section-four::after{
    background: #f53d1f !important;
}

.navigation-section-one-not-selected::after{
    background-color: #b3b3b3 !important;
}
.navigation-section-two-not-selected::after{
    background-color: #cccccc !important;
}
.navigation-section-three-not-selected::after{
    background-color: #cccccc !important;
}
.navigation-section-four-not-selected::after{
    background-color: #cccccc !important;
}
menuActive.js[^]
JavaScript
section.firstSection = function () {
    if (!isNavigationElementsRendered()) return;
    navigationBarElements[0].classList.add("navigation-section-one");
    navigationBarElements[0].classList.remove("navigation-section-one-not-selected");
};
section.secondSection = function () {
    if (!isNavigationElementsRendered()) return;
    navigationBarElements[1].classList.add("navigation-section-two");
    navigationBarElements[0].classList.remove("navigation-section-two-not-selected");
};
section.thirdSection = function () {
    if (!isNavigationElementsRendered()) return;
    navigationBarElements[0].classList.add("navigation-section-three");
    navigationBarElements[0].classList.remove("navigation-section-three-not-selected");
};
section.fourthSection = function () {
    if (!isNavigationElementsRendered()) return;
    navigationBarElements[0].classList.add("navigation-section-four");
    navigationBarElements[0].classList.remove("navigation-section-four-not-selected");
};
Posted
Updated 20-May-21 7:45am
v3
Comments
Richard Deeming 20-May-21 11:13am    
If you want someone to help you fix your code, you need to share the relevant parts of your code. We can't tell you how to fix code that we cannot see!
Milad Al Dwaihi 20-May-21 11:18am    
For sure,
https://github.com/MDwaihi/Test
Richard Deeming 20-May-21 11:20am    
No, that's your entire project.

We need to see the relevant parts of your code. You can't just dump a link to your project and expect someone to dig through all of the code to identify where the problem is.
Milad Al Dwaihi 20-May-21 11:25am    
first section is for the navigation style :
https://github.com/MDwaihi/Test/blob/main/css/custom.css

line 125 the function of the changing color navigation bar (left bar) :
https://github.com/MDwaihi/Test/blob/main/js/menuActive.js
Milad Al Dwaihi 20-May-21 11:44am    
the conditions:
- if the section with light grey background is selected: active left bar should be dark grey, non selected bars should be light grey
- if the section with dark grey background is selected: active left bar should be orange, non selected bars should be light grey

1 solution

Your stylesheet defines the classes as navigation-section-three, navigation-section-four, navigation-section-three-not-selected, and navigation-section-four-not-selected.

Your Javascript uses navigation-section-third, navigation-section-fourth, navigation-section-third-not-selected, and navigation-section-fourth-not-selected.

CSS class names need to match precisely. The browser can't guess that "third" is the same as "three".
 
Share this answer
 
Comments
Milad Al Dwaihi 20-May-21 12:23pm    
Yes this is fixed, replaced. But I think the problem is with the array.
Richard Deeming 20-May-21 12:25pm    
The problem with the code you've shown is with the class names not matching.

If you have a new problem, then you need to post a new question, and provide a proper description of the problem. "I think the problem is with the array" tells us nothing!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900