Keep Main Navigation underlined when viewing a Not Linked Page

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.

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

@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 

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.

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

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.

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

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

@creedon That works perfectly, thank you very much!

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

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

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

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! 

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;
}