Keep Main Navigation underlined when viewing a Not Linked Page

zzlogan · August 12, 2021

Site URL: https://pomegranate-badger-p3wd.squarespace.com/

Hi, I'm using 7.1. I have five Main Navigation pages that are associated to pages that are in the Not Linked section of Squarespace. I'm trying to make it so when someone is viewing a Not Linked Page, the Main Navigation associated to that page remains underlined.

For example: so when someone is on Issue #1: Disrupt (Not Linked Page), Magazine (Main Navigation) is still underlined

How can you do this without using Folders?

@tuanphan, @bangank36, @creedon

creedon · August 13, 2021

It may be possible to do this with CSS only but it seems to me it would be a more tortuous route. Javascript seems a better fit here.

Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add navigation magazine underline to magazine subpages
      
      Version       : 0.1d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      no user serviceable parts below
      
      */
      
      // bail if not magazine subpage
      
      if ( ! location.pathname.startsWith ( '/magazine/' ) ) return;
      
      $( '.header-nav-item [href="/magazine"]' )
      
        .parent ( )
        
        .addClass ( 'header-nav-item--active' );
        
      // end add navigation magazine underline to magazine subpages
      
    } );
    
  </script>

Let us know how it goes.

zzlogan · August 17, 2021

@creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works. Thank you for sharing this approach.

timjphoto · March 31, 2022

@creedon I hope you don't mind me resurrecting this thread but I'm trying to do exactly the same thing on my site, I would love to keep the 'PROJECTS' navigation heading highlighted when in any of the unlinked project gallery pages. I'm on version 7.0 so I don't think this code will work for me? Any help would be greatly appreciated.

www.timjobling.co.uk

creedon · March 31, 2022

38 minutes ago, timjphoto said:

I would love to keep the 'PROJECTS' navigation heading highlighted when in any of the unlinked project gallery pages. I'm on version 7.0 so I don't think this code will work for me?

No the code wouldn't work for your site. In addition the code was pretty easy to implement because the pages of interest were under the /magazine area of the site. That made it easy to add the css to make the effect happen.

Your projects are at the top level of the site so a different method would be required to achieve a similar effect. Either explicitly adding each url to the code so it knows what URLs are projects. Something like...

const urls = [

  '/hessia-studio',
  '/carter-road-skatepark',
  
  etc...
  
  ];

Alternately if your projects are always going to be at the top level and you only have a few other non-project top level pages, it may be easier to always apply the effect except when on certain pages.

const urlsExclude = [

  '/news',
  '/about-1',
  
  etc...
  
  ];

So there are a couple of options.

Change your project URLs to be something like /projects/hessia-studio. Then it would be pretty easy to alter the above code to work for your site. It would also basic be self maintaining as long as you keep the same URL structure. You'd want to consider the effect that change may have on your search rankings. There are ways to mitigate that issue but that is another topic.

The second is basically what I described about including or excluding the effect based on specific page. That code would need to be updated every time you made a URL change or added or deleted pages.

Which method do you think would work for your needs?

The above code snippets are not to be installed. They are pseudo code.

timjphoto · March 31, 2022

@creedon Thanks very much for the reply. I think the second option you mentioned might suit me better, I would be wary of making any changes that may affect search rankings, and I'm more than happy to update the code when making new pages as I don't add galleries that often. Thank you, Tim.

creedon · March 31, 2022

17 minutes ago, timjphoto said:

I think the second option you mentioned might suit me better

Do you think explicitly telling the code which pages are projects or telling it what pages are not projects would work better for you? In many cases I would think the later approach would mean less contact ( having to edit it ) with the code.

Quote

I would be wary of making any changes that may affect search rankings

There is risk of course with any changes to well established URLs within a site in relation to search engines. But as I mentioned those risks can be reduced by using SS's built-in URL redirects feature.

timjphoto · April 1, 2022

@creedon Apologies I see what you're saying now, I think telling the code which pages are not projects would be better as there are far fewer of them. I'll take a look at the URL redirects. Thanks.

creedon · April 2, 2022

@timjphoto

Add the following to Settings > Advanced > Code Injection > HEADER.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add header navigation projects link active on "project" pages to Settings > Advanced > Code Injection > FOOTER.

Let us know how it goes.

timjphoto · April 3, 2022

@creedon That works perfectly, thank you very much!

timjphoto · April 3, 2022

@creedon I’ve just found a little tweak I was wondering if you might be able to help with. I’ve noticed that when I clicI on any of the blog sections the nag goes back to highlighting ‘projects’ in the navigation, is it simple to have them highlight ‘news’ for the blog posts instead? Many thanks again for your help, Tim.

creedon · April 4, 2022

@timjphoto

This is where you add in other url slugs you want to exclude from the effect.

So the bit in the code that looks like...

        // '[enter url slug here between single quotes]',
        
        'about-1',
        'news',
        
        ];

...becomes...

        // '[enter url slug here between single quotes]',
        
        'about-1',
        'news',
        'tim-jobling-photography',
        
        ];

I assume tim-jobling-photography is the slug for your blog.

Let us know how it goes.

timjphoto · April 4, 2022

@creedon Thanks very much for your reply, very much appreciated, I'll take a look.

CharlieGeyer86 · April 8, 2022

I have a similar issue to OP, but it's slightly different.

The site is amydittmar.com
pw: dittmar

I am using a folder with links to individual portfolio projects in the top navigation (WORK), because that seems to be the only way to generate a dropdown menu in the top navigation that reveals the individual projects. When a project is active I'd like the parent menu item (WORK) to have the active state. This is the default behavior when a page is active within a folder, but it doesn't work with links.

I am on a personal plan, so I'm unable to inject code into the header or footer, and I am hoping to avoid having to upgrade my plan just for this one little line. haha.

I currently disabled the underline on the ABOUT page so the experience would be consistent, but this is a stop gap measure.

Let me know if you need more info!

tuanphan · April 10, 2022

On 4/9/2022 at 3:03 AM, CharlieGeyer86 said:

I have a similar issue to OP, but it's slightly different.

The site is amydittmar.com
pw: dittmar

I am using a folder with links to individual portfolio projects in the top navigation (WORK), because that seems to be the only way to generate a dropdown menu in the top navigation that reveals the individual projects. When a project is active I'd like the parent menu item (WORK) to have the active state. This is the default behavior when a page is active within a folder, but it doesn't work with links.

I am on a personal plan, so I'm unable to inject code into the header or footer, and I am hoping to avoid having to upgrade my plan just for this one little line. haha.

I currently disabled the underline on the ABOUT page so the experience would be consistent, but this is a stop gap measure.

Let me know if you need more info!

Add to Design > Custom CSS

body.collection-62125f01d0ec7d5c8be58f6f.view-item .header-nav-folder-title[href="/work-1"] {
    text-decoration: underline;
}

Keep Main Navigation underlined when viewing a Not Linked Page

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

creedon

zzlogan

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources