Bringing Subpages into Navigation Header

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

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

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.

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

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  ⬇️

Thanks again @paul2009 it worked - soooo helpul your work here on this platform. I am superhappy!

Thanx!