How do I use a different navigation for the blog page only? - Debut Theme

Hi,

I have created a new navigation menu for my blog page only. However, when I tried editing the Debut theme to change the navigation menu, it will automatically change it for the entire site. I would like to use a different navigation menu only for the blog.

Please help me resolve this issue if anyone has figured it out. I would sincerely appreciate if you could share your knowledge.

Many Thanks,

Esther

Hi @Esther_1 ,

Nick here from Shopify. Great question!

I looked into this and spoke to our theme support team for you. They mentioned it is something that would need to be looked further into and would be a little out of the scope of a reply in the community here. If you would like I could reach out to you via email directly to have our theme support team take a closer look for you or if you wanted to contact our support team directly about it you can do so from here.

If you would like me to reach out to you, could you confirm if the best email to catch you on is the one you signed up to the community with if it isn’t can you let me know which is the best one? ?

All the best, Nick

Hi @Nick ,

If you can help then I’ll be extremely happy if you would take the time out to reach out to me. Contacting me on my registered email address is perfect.

I look forward to hearing from you soon. Thank you for your time.

This is completely addressable in a forum post. You’ll want to find where your navigation is included in your theme. In my default Debut theme, it’s located in the header.liquid file in the sections folder. In header.liquid you can look for an include for the site nav. So ctrl + f for “include” or “site-nav”. You’ll want to make an if statement around that, like this:

          {% if template == "blog" %}
          {% include 'blog-nav' %}
          {% else %}
          {% include 'site-nav' %}
          {% endif %}

Then open up the site-nav.liquid file in the snippets folder. Copy that code and create a new snippet called “blog-nav” and paste the site-nav code into your new “blog-nav”. On the second line you will see this:

{% for link in linklists[section.settings.main_linklist].links %}

Change that in the brackets to whatever the handle of your linklist is that you created for your blog. Im going to replace it with a dot, because I prefer the way that looks to brackets. Like this:

{% for link in linklists.your-navigation-name.links %}

Now when you go your blog you will have a different set of links.

3 Likes

Hi @Ninthony ,

Thank you for your help. I just tried to resolve it with your code. I followed it step by step and had no effect on the blog page as it still is using the main nav.

Can you post a link to your store and a password if it’s password protected?

@Ninthony my website is https://creativ-ocean.myshopify.com

and the passwords is poopla

okay I just wanted to be sure you were on a blog template. I’d probably need to take a look at your files to be sure what’s going on. I sent a request to access parts of your site from my developer store. If you accept the request I can take a look to see what’s going on.

@Ninthony Thank you, I’ve granted you access now.

Alright I fixed it. You didn’t do the if statement in the header.liquid and also there were a couple typos in your

{% for link in linklist[blog]links %}

Should have been:

{% for link in linklists.blog.links %}

Working now

1 Like

Actually, I see that you did do the if statement, but it’s inside another if statement that says “if section.settings.align_logo == ‘center’”, so since you probably dont have that option checked in your customize view in your header section, it didn’t enter in there.

1 Like

@Ninthony Yaaaayyy! Thank you so much. You are amazing. I really appreciate it.

2 Likes

@Ninthony Oh ok, I knew I must have missed something. Thank you so much.

Not a problem, glad it helped.

1 Like

hi @Ninthony thanks so much for the code. it worked on my site, i wanted 1 nav for the home page (‘alt-nav’ for ‘index’) and another for the rest of the site (‘site-nav’ for everything else). however, when the menu is collapsed (like on mobile), it just reverts to ‘site-nav’ for everything, even the home page.

can you help? i’m attaching 2 screenshots. and here is the website: www.foliotravel.com

Okay I wrote this a while ago. This is probably a better way to approach it. Undo your previous changes and then open up header.liquid in your sections folder and add this to the very top:

{% if template == 'index' %}
{% assign link_list = 'your-collection-handle' %}
{% else %}
{% assign link_list = 'site-nav' %}
{% endif %}

Then still inside header.liquid ctrl + f for “MobileNav” and you’ll find the mobile navigation. Change that from this:

{% for link in linklists[section.settings.main_linklist].links %}

To this:

{% for link in linklists[link_list].links %}

Then go into site-nav.liquid and do the same thing, replace the for loops “section.settings.main_linklist” to “link_list” as you’ll still have access to that variable. Then you should be good to go.

Awesome, thank you!

I was able to do this, but the menu actually disappears on the non-homepages. but if i use ‘main-menu’ instead of ‘site-nav’ (see below) then it works. Any insight as to why it’s not working when using ‘site-nav’? Just kind of curious at this point.

{% if template == ‘index’ %}
{% assign link_list = ‘main-menu-homepage’ %}
{% else %}
{% assign link_list = ‘main-menu’ %}
{% endif %}

it has to be the handle of whatever link list you’re using. I assumed it was “site-nav” from your previous comment. “main-menu” is the default link list that debut pulls from.

Ah, got it. I had thought that ‘site-nav’ was the name of the object that gets changes depending on what you use when selecting the header on the customization page. Rookie mistake :slight_smile:

Thank you again!

Hi @Ninthony I saw all of your helpful comments and was hoping you could help me with customizing my blog page. My theme is Streamline and it does not have “site-nav.liquid” under Snippets, so I was unable to apply your previous advice. What I’m trying to do is remove the global navigation from the blog only so it feels like more of a blog and less like a section/page of the website.

I’m currently having a logo designed for the blog and would like to upload that when it’s completed so it feels more like an editorial magazine that’s an extension of the brand, but not a page of the website.

Can you help?