Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Keep Main Navigation underlined when viewing a Not Linked Page


zzlogan

Question

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

site.png

Link to comment

14 answers to this question

Recommended Posts

  • 2

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

@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 

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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

Link to comment
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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! 

Screen Shot 2022-04-08 at 3.50.10 PM.png

Link to comment
  • 0
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! 

Screen Shot 2022-04-08 at 3.50.10 PM.png

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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