Placing a customized menu on specific page

[Rio_Omnis]

Hi there I am looking for help placing a customized menu on a specific page. This is the website in question Pete's Rubbers.  I have this menu:

That I would like to place on this page:

[EBOOST]

Hi @Rio_Omnis ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Add snippets/duramax-menu.liquid
3. Add code to this file

{% comment %}
  Renders a standard dropdown style menu for the header.

  Usage:
  {% render 'header-dropdown-menu' %}
{% endcomment %}

<nav class="header__inline-menu">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in menu -%}
      <li>
        {%- if link.links != blank -%}
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </summary>
              <ul
                id="HeaderMenu-MenuList-{{ forloop.index }}"
                class="header__submenu list-menu list-menu--disclosure color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
                role="list"
                tabindex="-1"
              >
                {%- for childlink in link.links -%}
                  <li>
                    {%- if childlink.links == blank -%}
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                    {%- else -%}
                      <details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
                        <summary
                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                          class="header__menu-item link link--text list-menu__item focus-inset caption-large"
                        >
                          <span>{{ childlink.title | escape }}</span>
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        </summary>
                        <ul
                          id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                          class="header__submenu list-menu motion-reduce"
                        >
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      </details>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </details>
          </header-menu>
        {%- else -%}
          <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>

4.  Go to Layout/theme.liquid

5. Refer screenshot to add code below to this file

 {% if request.path  contains 'duramax' %}
        {% assign menu = linklists.duramax.links %}
        {%  render 'duramax-menu', menu: menu %}  
      {%  endif %}

[Rio_Omnis]

Thank you it worked! just one more thing is there a way to offset it a bit. It's right at the very edge right now.

As well as the menu does not show up on mobile. I was wondering if you knew how to set it up for mobile?

Do you know why when making the other menus eventhough they work whatever I do to one link shows up in all the other links:

[EBOOST]

Hi @Rio_Omnis ,

You can update code below for snippets/duramax-menu.liquid:

And could you please share url store & theme preview that you setup?

{% comment %}
  Renders a standard dropdown style menu for the header.

  Usage:
  {% render 'header-dropdown-menu' %}
{% endcomment %}
<div class="page-width">
<nav class="header__inline-menu header__inline-menu-custom">
  <ul class="list-menu list-menu--inline" role="list">
    {%- for link in menu -%}
      <li>
        {%- if link.links != blank -%}
          <header-menu>
            <details id="Details-HeaderMenu-{{ forloop.index }}">
              <summary
                id="HeaderMenu-{{ link.handle }}"
                class="header__menu-item list-menu__item link focus-inset"
              >
                <span
                  {%- if link.child_active %}
                    class="header__active-menu-item"
                  {% endif %}
                >
                  {{- link.title | escape -}}
                </span>
                {{- 'icon-caret.svg' | inline_asset_content -}}
              </summary>
              <ul
                id="HeaderMenu-MenuList-{{ forloop.index }}"
                class="header__submenu list-menu list-menu--disclosure color-{{ section.settings.menu_color_scheme }} gradient caption-large motion-reduce global-settings-popup"
                role="list"
                tabindex="-1"
              >
                {%- for childlink in link.links -%}
                  <li>
                    {%- if childlink.links == blank -%}
                      <a
                        id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                        href="{{ childlink.url }}"
                        class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"
                        {% if childlink.current %}
                          aria-current="page"
                        {% endif %}
                      >
                        {{ childlink.title | escape }}
                      </a>
                    {%- else -%}
                      <details id="Details-HeaderSubMenu-{{ link.handle }}-{{ childlink.handle }}">
                        <summary
                          id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}"
                          class="header__menu-item link link--text list-menu__item focus-inset caption-large"
                        >
                          <span>{{ childlink.title | escape }}</span>
                          {{- 'icon-caret.svg' | inline_asset_content -}}
                        </summary>
                        <ul
                          id="HeaderMenu-SubMenuList-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                          class="header__submenu list-menu motion-reduce"
                        >
                          {%- for grandchildlink in childlink.links -%}
                            <li>
                              <a
                                id="HeaderMenu-{{ link.handle }}-{{ childlink.handle }}-{{ grandchildlink.handle }}"
                                href="{{ grandchildlink.url }}"
                                class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if grandchildlink.current %} list-menu__item--active{% endif %}"
                                {% if grandchildlink.current %}
                                  aria-current="page"
                                {% endif %}
                              >
                                {{ grandchildlink.title | escape }}
                              </a>
                            </li>
                          {%- endfor -%}
                        </ul>
                      </details>
                    {%- endif -%}
                  </li>
                {%- endfor -%}
              </ul>
            </details>
          </header-menu>
        {%- else -%}
          <a
            id="HeaderMenu-{{ link.handle }}"
            href="{{ link.url }}"
            class="header__menu-item list-menu__item link link--text focus-inset"
            {% if link.current %}
              aria-current="page"
            {% endif %}
          >
            <span
              {%- if link.current %}
                class="header__active-menu-item"
              {% endif %}
            >
              {{- link.title | escape -}}
            </span>
          </a>
        {%- endif -%}
      </li>
    {%- endfor -%}
  </ul>
</nav>
</div>
<style>
  .header__inline-menu.header__inline-menu-custom {
    display: block!important;
  }
</style>

[Rio_Omnis]

Hi I really appreciate all the help here is the link Pete's Rubbers  . With the new code I have gotten the mobile working. Is there any way to make it consolidate like the menu above or something like that so it doesn't looked stacked? And as you can see it is still placing anything I place in one page and making it part of all the others. 

Thanks again for all the help!

[EBOOST]

Hi @Rio_Omnis ,

- You can download code here https://github.com/eboost10/2640367/blob/main/2968481/duramax-menu.liquid to replace code for snippets/duramax-menu.liquid

- Create snippets/duramax-menu-drawer.liquid with content here https://github.com/eboost10/2640367/blob/main/2968481/duramax-menu-drawer.liquid

- In the layout/theme.liquid update code to

{% if request.path  contains 'duramax' and request.page_type == 'page' %}
        {% assign menu = linklists.duramax.links %}
        {%  render 'duramax-menu', menu: menu %}
        {%  render 'duramax-menu-drawer', menu: menu %}  
      {%  endif %}

- you can check page_type here https://shopify.dev/docs/api/liquid/objects/request

[Rio_Omnis]

Hi you are very helpful thank you so much. Sorry to keep bugging you. Here is what I found when making the adjustments:

On the mobile version the menu does not show all the options. 

Is there a way to have the stacked menu in the page and not on a separate header?

I also noticed on the menu on desktop the stacked menu does not hide 

And i'm still running into the issue of the collection pages on the menu having the same changes. If I place exhaust system title on the exhaust system it also shows on the other collection pages like the muffler collection page.

Again thank you so much with everything, and taking your time to help me. 

[EBOOST]

Hi @Rio_Omnis 

- On the mobile version the menu does not show all the options.  -> you can add code below to end of the snippets/duramax-menu-drawer.liquid file

<style>
  .section-header {
    z-index: 5;
  }
</style>

- Is there a way to have the stacked menu in the page and not on a separate header? -> This one have some complex. B/c your theme is not free theme. I don't care structure of theme.

- I also noticed on the menu on desktop the stacked menu does not hide -> you can add code below to end of the snippets/duramax-menu-drawer.liquid file to hide it.

@media screen and (min-width: 990px) {
  #MainContent header-drawer {
    display: none;
  }
}

-And i'm still running into the issue of the collection pages on the menu having the same changes. If I place exhaust system title on the exhaust system it also shows on the other collection pages like the muffler collection page. -> you can add exactly condition for each collection

ex: for this collection

https://petesrubbers.com/collections/powerstroke-2020-2022-6-7l-exhaust-systems

You can add code in Layout/theme.liquid

{% if request.path  == '/collections/powerstroke-2020-2022-6-7l-exhaust-systems' %}
        {% assign menu = linklists.duramax.links %}
        {%  render 'duramax-menu', menu: menu %}
        {%  render 'duramax-menu-drawer', menu: menu %}  
      {%  endif %}

[mageplaza-cs]

Hi @Rio_Omnis 

I am from Mageplaza - Shopify solution expert.

You can follow these steps to create a custom menu for a specific page.

1. Go to Online Store > Themes > Edit Code

2. Under Templates, click “Add a new template”

3. Choose Page, name it custom-menu, and click “Create” (liquid file)

4. Replace the content with this:

{% section 'custom-menu-section' %}

5. Click Save

6. Under Sections, click "Add a new section"

7. Name it custom-menu-section

8. Paste this code:

<section>
    <nav class="custom-menu">
        <ul>
            <li><a href="/collections/all">All Products</a></li>
            <li><a href="/collections/new-arrivals">New Arrivals</a></li>
            <li><a href="/collections/sale">Sale</a></li>
            <li><a href="/contact">Contact Us</a></li>
        </ul>
    </nav>
</section>

<style>
    .custom-menu {
        width: 100%;
        background: #f8f8f8;
        padding: 10px 0;
        text-align: center;
    }
    .custom-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    .custom-menu ul li {
        display: inline;
    }
    .custom-menu ul li a {
        text-decoration: none;
        color: #333;
        font-weight: bold;
        padding: 8px 15px;
        transition: 0.3s;
    }
    .custom-menu ul li a:hover {
        background: #ddd;
        border-radius: 5px;
    }
</style>

-> Assign the Custom Template to a Specific Page

1. Go to Online Store > Pages
2. Select the page where you want the menu
3. On the right under Theme Template, choose "custom-menu"
4. Click Save

Please let me know if it works as expected!

Best regards!

[Rio_Omnis]

When I do this I have to also place the liquid into a custom liquid section on the page because it does not show up as a section. I also need help with making the menu since i'd have to have submenus I.E:  Duramax: 2018-2020 6.7L -> Exhaust Systems -> link to collection or product. I am not well versed in coding and I would need a little bit of a step by step with atleast on of the menu and submenu items from there I can just replicate the code to make up the rest of the menu.