Jump to content

Bringing Subpages into Navigation Header

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://ericmayer.de

Hey there,

I would like my Site Header Navigation (right now showing "Home", "Kontakt" and the social icons) to also show the four different Subpages "TV", "Podcast", "Bücher" and "Live". What are these four pages actually, since they are not treatet as normal pages and are not shown in the site header.

Any suggestions? Thanx a trillion!

 

Marc

Link to comment
  • Solution
13 minutes ago, EricFFM said:

I would like my Site Header Navigation to also show the four different Subpages "TV", "Podcast", "Bücher" and "Live".

You can create links to these portfolio items in the header navigation manually. See Adding links to your navigation for details of how to do this. For example, to add a link to "TV" you would use the link "/home/tv" (without the quotes).

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
On 8/3/2022 at 1:36 PM, paul2009 said:

You can create links to these portfolio items in the header navigation manually. See Adding links to your navigation for details of how to do this. For example, to add a link to "TV" you would use the link "/home/tv" (without the quotes).

Amazing, thanks so much. I just did it. It works, but TV won't be underlined when clicked. Still "Home" is underlined, so there could be some confusion where you are on the website. I guess that cannot be changed? 

Thanx again!

@paul2009

Link to comment
2 hours ago, EricFFM said:

It works, but TV won't be underlined when clicked. Still "Home" is underlined, so there could be some confusion where you are on the website. I guess that cannot be changed? 

"TV" is a subpage of the homepage, so technically "Home" is still correct as far as Squarespace are concerned. Some workarounds are:

  • It may be better if you move "Home" to the NOT LINKED section of PAGES so that it doesn't appear in the navigation. Visitors will still be able to click the site title/logo to reach the homepage, but they won't see the confusing underline. 
  • You could remove all the underlining in the navigation.
  • If you are on a Business Plan or higher, you could add some JavaScript to update the underlying so that it changes when visitors click on the portfolio subpages.

I hope this helps.

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment
2 hours ago, EricFFM said:

I would like to try your advice with JavaScript. Could you give me a hint how to do that

Try adding the following to Settings > Advanced > Code Injection > Footer:

<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    const pathMap = {
      '/home/tv': document.querySelector('.header-nav-item a[href="/home/tv"]'),
      '/home/podcast': document.querySelector('.header-nav-item a[href="/home/podcast"]'),
      '/home/buecher': document.querySelector('.header-nav-item a[href="/home/buecher"]'),
      '/home/live': document.querySelector('.header-nav-item a[href="/home/live"]'),
    };
    const path = location.pathname;
    if (pathMap[path]) {
      pathMap[path].parentNode.classList.add('header-nav-item--active');
    }
  });
</script>

Test it from an incognito or private window where you are not logged on to the site as it is not intended to function whilst logged on.

Was this post helpful? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

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.