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

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

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment

Dear @paul2009 

thanx again for the incredibly helpful informations. Since I am on a business plan, I would like to try your advice with JavaScript. Could you give me a hint how to do that / where to get the information for that?

(Sorry for the triple-question)

Thank you and greeting 
Eric

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

Improve your online store with our extensions.
About: Sqsp Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of SF Digital, dedicated to improving websites by building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

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