Change navigation left bar colors while changing sections

Question

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 18-May-21 23:10pm

Milad Al Dwaihi

Updated 20-May-21 6:45am

v3

Add a Solution

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

Add a Solution

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

Richard Deeming · Answer 1 · 2021-05-20T05:45:00

Solution 1

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".

Posted 20-May-21 5:45am

Richard Deeming

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!

Change navigation left bar colors while changing sections

1 solution

Solution 1

Add your solution here

Preview 0

Change navigation left bar colors while changing sections

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us