Jump to content

How to change navigation menu for specific pages in same site

Recommended Posts

Site URL: https://www.danielromero.nyc/daniel-romero

My business has two locations. I have created a landing page as my home page which allows the user to click into one area or the other which then takes them into either version of a full identical website under the same domain. Each of the two sites will have a homepage and navigation. I would like to have the navigation bar be different for each site and be able to decide which pages my navigation of choice will appear on. How can I make a custom navigation to show up on one page and a different navigation menu to show up on another page?

 

Link to comment
  • 1 year later...
  • Replies 9
  • Views 4.6k
  • Created
  • Last Reply

Top Posters In This Topic

I am having the same issue. I want a different nav menu on my blog than I have on the rest of my site. Cannot find a solution online. This seems like it would be a common problem for people hosting a blog on a business website, but I am not seeing solutions online. 

Maybe creating secondary nav and hiding on all pages but the blog? Or another solution?

 

https://resumeinsider.net

Edited by HeatherLeigh
<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment

@tuanphan I am wondering if you can help? 

<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment
22 hours ago, HeatherLeigh said:

I am having the same issue. I want a different nav menu on my blog than I have on the rest of my site. Cannot find a solution online. This seems like it would be a common problem for people hosting a blog on a business website, but I am not seeing solutions online. 

Maybe creating secondary nav and hiding on all pages but the blog? Or another solution?

 

https://resumeinsider.net

Yes. You can use this way

Maybe creating secondary nav and hiding on all pages but the blog?

You can add items first, then we will check & give the code

Or you can also add all items to main navigation, then we will hide some items on blog page.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
On 5/20/2021 at 8:28 AM, tuanphan said:

Yes. You can use this way

Maybe creating secondary nav and hiding on all pages but the blog?

You can add items first, then we will check & give the code

Or you can also add all items to main navigation, then we will hide some items on blog page.

Hi Tuan, this sent me down the right path. So far, I have created my secondary nav, which I will use for my blog.  

I have added this code (which you provided somewhere else) to the blog page, to hide the main nav on my blog (resumeinsider.net/blog):

<style>
  nav.Header-nav.Header-nav--primary{
    display: none;
}

I went to my home page resumeinsider.net) and added this to get rid of the secondary nav, just to see how it would look:

<style>
  nav.Header-nav.Header-nav--secondary {
    display: none;
}

That worked great. Secondary nav is gone from home page. Now, I need to get that secondary nav off all of the other pages except for the blog page.

Do I need to add that code to every other page to remove the secondary nav? How would I add the code in CSS so that it is saying to not display the secondary code on any page other than pages that start with resumeinsider.net/blog

I hope this makes sense. Can't tell you how much I appreciate your help!

<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment
On 6/2/2021 at 9:17 AM, HeatherLeigh said:

Hi Tuan, this sent me down the right path. So far, I have created my secondary nav, which I will use for my blog.  

I have added this code (which you provided somewhere else) to the blog page, to hide the main nav on my blog (resumeinsider.net/blog):

<style>
  nav.Header-nav.Header-nav--primary{
    display: none;
}

I went to my home page resumeinsider.net) and added this to get rid of the secondary nav, just to see how it would look:

<style>
  nav.Header-nav.Header-nav--secondary {
    display: none;
}

That worked great. Secondary nav is gone from home page. Now, I need to get that secondary nav off all of the other pages except for the blog page.

Do I need to add that code to every other page to remove the secondary nav? How would I add the code in CSS so that it is saying to not display the secondary code on any page other than pages that start with resumeinsider.net/blog

I hope this makes sense. Can't tell you how much I appreciate your help!

try this

body:not(.collection-type-blog) nav.Header-nav.Header-nav--secondary {
	display: none;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

try this


body:not(.collection-type-blog) nav.Header-nav.Header-nav--secondary {
	display: none;
}

 

Hi Tuan, I should probably mention that I have my blog content on an index page, using a summary. I gave you the wrong link to the blog. It should be https://resumeinsider.net/resume-insider-blog.

The Brine template didn't allow me to add content to the main blog page, so I did this as a workaround. 

So, if I were to use this code, is there a way I could identify the specific page, rather than the collection type?

I can't tell you how much I appreciate your help!

<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment
20 hours ago, HeatherLeigh said:

Hi Tuan, I should probably mention that I have my blog content on an index page, using a summary. I gave you the wrong link to the blog. It should be https://resumeinsider.net/resume-insider-blog.

The Brine template didn't allow me to add content to the main blog page, so I did this as a workaround. 

So, if I were to use this code, is there a way I could identify the specific page, rather than the collection type?

I can't tell you how much I appreciate your help!

You can target Page ID. See how to find page id.

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...
On 6/4/2021 at 7:46 AM, tuanphan said:

You can target Page ID. See how to find page id.

 

For some reason, I can only get a yui# on my search page. I used developer tools to investigate. I'm not seeing anything else I can target. I am sure I am missing something.

resumeinsider.net/search

<table style="width: 430px;">
<tbody>
<tr>
<td width="288" style="width: 420px;">
<p style="color: #43414e;">Heather Hamilton</p>
<p style="color: #43414e;">Founder, Resume Insider</p>
<div style="color: #bc8420;">
<p><a href="https://resumeinsider.net/" style="color: #43414e;">Website</a>&nbsp; |&nbsp; <a href="https://www.facebook.com/resumeinsidernet" style="color: #43414e;">Facebook</a>&nbsp; |&nbsp; <a href="https://www.linkedin.com/in/heatherhamilton/" style="color: #43414e;">LinkedIn</a>&nbsp; | <a href="https://about.me/heatherhamilton" style="color: #43414e;">About me</a></p>
</div>
</td>
</tr>
</tbody>
</table>

 

Link to comment
On 10/12/2021 at 6:26 AM, HeatherLeigh said:

For some reason, I can only get a yui# on my search page. I used developer tools to investigate. I'm not seeing anything else I can target. I am sure I am missing something.

resumeinsider.net/search

Oh, search page has no page id. You can add this code to Settings > Advanced > Code Injection >> To set an ID for search page

<script>
  if (window.location.pathname == '/search'){
    window.addEventListener('load', function(){
      document.querySelector('body').classList.add('sqs-search-page')
    });
  }
</script>

then it will have an id

Quote

body.sqs-search-page

 

Edited by tuanphan

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.