Navbar JavaScript Help

Technical Details

Forum version : #PunBB
Position : Administrator
Concerned browser(s) : Mozilla Firefox, Other
Who the problem concerns : All members
When the problem appeared : Last night
Forum link : https://pwpclan.forumotion.com

Description of problem

Hello, I am looking for some help with a JavaScript code. I added this JavaScript code to the website to add a CSS class called .active to my navigation menu. It worked as expected when you are on the "Forum" page but when I go to the "Home" page the JavaScript code adds the .active class to the entire nav bar. How can I modify this to prevent that from happening?

JavaScript Code:

Code:

$(function(){
    var current = location.pathname;
    $('#pun-navlinks li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.parent().addClass('active');
        }
    })

HOME PAGE VIEW (incorrect):
https://prnt.sc/tYVTFPM0MuJs

FORUM PAGE VIEW (correct):
https://prnt.sc/ha4m6sJdRlBQ

As you can see in the screenshots above when on the home page the script adds the active class to the entire navbar as opposed to just the "Home" button.

Appreciate any help I can get in advance!

hi @MrEighty8

CSS Code:

Code:

#pun-navlinks a.active {
    background: linear-gradient(0deg,#00cbf7,#0095c9);
}


JavaScript Code:

Try replacing the script you installed in the tutorial with this one :

Code:

$(function() {
    $('#pun-navlinks a[href="' + location.pathname + '"]').addClass('active');
    if (location.pathname == "/privmsg" || location.pathname == "/profile") {
        $('#pun-navlinks a[href^="' + location.pathname + '"]').addClass('active')
    }
});

كونان2000 wrote:hi @MrEighty8

CSS Code:

Code:

#pun-navlinks a.active {
    background: linear-gradient(0deg,#00cbf7,#0095c9);
}


JavaScript Code:

Try replacing the script you installed in the tutorial with this one :

Code:

$(function() {
    $('#pun-navlinks a[href="' + location.pathname + '"]').addClass('active');
    if (location.pathname == "/privmsg" || location.pathname == "/profile") {
        $('#pun-navlinks a[href^="' + location.pathname + '"]').addClass('active')
    }
});

Hey, very much appreciate the reply but that script didn't seem to be the fix. Essentially I am trying to get a script that reads the current URL and if that current URL is true then it adds the active class to the navbar (so I can style it with CSS). Right now the script I have in place works totally fine until I navigate to the home page of the domain (www.pwpclan.forumotion.org), then all the links get added with the .active class. If you go to the website you can see exactly what I am referring to by clicking on any of the nav links vs the "Home" link.

Hey, is that what you mean
The active button has a background


The background is only in the active button

كونان2000 wrote:Hey, is that what you mean
The active button has a background


The background is only in the active button

Yes sir. My previous code was working fine for all the pages except when you were on the home page and I wasn't sure why (still learning JavaScript).

Example of whats happening: (ignore the CSS styling being a mess)
EDIT:

hi @MrEighty8

Try entering the code into a template index_body

Code:

    <style>
  #pun-navlinks > ul > li:nth-child(2),
#pun-navlinks > ul > li:nth-child(3),
#pun-navlinks > ul > li:nth-child(4),
#pun-navlinks > ul > li:nth-child(5),
#pun-navlinks > ul > li:nth-child(6),
#pun-navlinks > ul > li:nth-child(7),
#pun-navlinks > ul > li:nth-child(8),
#pun-navlinks > ul > li:nth-child(9),
#pun-navlinks > ul > li:nth-child(10),
#pun-navlinks > ul > li:nth-child(11)
{
    background: #0000 !important;
}
    </style>

I tried it on my test forum
working fine

كونان2000 wrote:hi @MrEighty8

I tried it on my test forum
working fine

For whatever reason I was unable to use your JavaScript code, however, thanks for the recommendation with CSS.

I ended up solving the issue by putting this code on my portal page.

Code:

<style>
#pun-navlinks > ul > li + li {
    background: #191919 !important;
}
#pun-navlinks >ul > li + li:hover {
    background:#515151 !important;
}
</style>

Thanks again for the help!

thank you for posting the solution

Problem solved & topic archived. Please read our forum rules: ESF General Rules