Top Navigation "Open Link in New Tab" Issue

Site URL: https://cyan-grape-y4g4.squarespace.com/

Hello! I’ve been having an issue with the top navigation links on my website, which I’ll demonstrate using the above sample site. I would like the top navigation words to function as clickable links while still acting as folders that produce a dropdown menu.

So, in this example, when the user clicks the “About” link in the top navigation, they will be brought to a main “About” page, but hovering over “About” will still produce the drop down menu. I’ve found this can be partially executed using this code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>

<script>

$(document).ready(function() {

    $('.header-nav-folder-title[href="/about-1"]').click(function() {

        window.location = "about-page-main-test";

    });

});

</script>

Using the above, “About” still functions as a folder, but is also clickable and leads users to my desired page.

However, I have found when I implement this code, right clicking “About” in the top navigation and attempting to open its link in a new tab leads me to the wrong page. More specifically, it leads me to the first page in the “About” folder—in this example, this is the “What We Do” page.

Why does this occur? Is there any way to fix it?

It could be addressed by having the desired page as the first one in the folder, but I’m hoping for a separate solution that doesn’t require me to add any other pages to the folder in question.

Can provide the password for the site in a message upon request! Thank you!

• K

What is password?

I've sent the password in a direct message; let me know if you didn't receive it. Thanks!

This issue was resolved by Tuan; they suggested replacing the code

<script>
$(document).ready(function() {
    $('.header-nav-folder-title[href="/about-1"]').click(function() {
        window.location = "about-page-main-test";
    });
});
</script>

with the following:

<script>
$(document).ready(function() {
    $('.header-nav-folder-title[href="/about-1"]').click(function() {
        window.location = "about-page-main-test";
    });
  $('.header-nav-folder-title[href="/about-1"]').attr('href','/about-page-main-test');
});
</script>

That seems to have resolved the issue - clicking and Right clicking > Open link in new tab now both produce the same result from the top navigation folder when it is clickable.