Jump to content

Top Navigation "Open Link in New Tab" Issue

Recommended Posts

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
Link to comment
  • Replies 3
  • Views 684
  • Created
  • Last Reply

Top Posters In This Topic

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.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.