How to change navigation menu for specific pages in same site

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?

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

@tuanphan I am wondering if you can help? 

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.

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!

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;
}

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!

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.

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

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