I have two design of header i want to run first design

Shopify Discussion

Topic summary

A Shopify developer is struggling with conditional logic for two different header/banner designs in their navigation menu.

Currently, the code uses an if/else condition based on menu link titles (“Shop Now” triggers the if condition, “Shop” triggers else). However, the wrong design is being displayed—the else condition design appears when they want the if condition design to show.

The provided code snippet appears corrupted or reversed (text is backwards/garbled), making it difficult to diagnose the exact issue. The code involves mega-menu logic with nested links and conditional rendering based on link properties.

Proposed Solution:
One respondent suggests implementing a JavaScript cookie-based approach: create a cookie on click action, then check the cookie value to hide/show the appropriate banner design on the page.

Status: The issue remains unresolved with limited troubleshooting due to the code formatting problems.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

on my shopify i have two designs for banner.

on nav menu when i create Shop Now then if condition call and if change this to only Shop then else condition design call. i want to call the if condition for this but for other else condition design are call.

{%- if link.links.size > 0 or mega_menu_images != blank -%}
            <div hidden id="desktop-menu-{{ forloop.index }}" class="mega-menu" {{ mega_menu_block.shopify_attributes }}>
              <div class="container">
                <div class="mega-menu__inner">
                  {%- if mega_menu_block.settings.images_position == 'left' and mega_menu_images != blank -%}
                    <div class="mega-menu__images-wrapper {% if images_count >= 3 %}mega-menu__images-wrapper--tight{% endif %}">
                      {{- mega_menu_images -}}
                    </div>
                  {%- endif -%}

                  {%- if link.links.size > 0 -%}
                    <div class="mega-menu__columns-wrapper">
                      {%- for sub_link in link.links -%}
                        <div class="mega-menu__column">
                          {%- if sub_link.url == '#' -%}
                            <span class="mega-menu__title heading heading--small">{{ sub_link.title }}</span>
                          {%- else -%}
                            <a href="{{ sub_link.url }}" class="mega-menu__title heading heading--small">{{ sub_link.title }}</a>
                          {%- endif -%}

                          {%- if sub_link.links.size > 0 -%}
                            <ul class="linklist list--unstyled" role="list">
                              {%- for sub_sub_link in sub_link.links -%}
                                <li class="linklist__item">
                                  <a href="{{ sub_sub_link.url }}" class="link--faded">{{ sub_sub_link.title }}</a>
                                </li>
                              {%- endfor -%}
                            </ul>
                          {%- endif -%}
                        </div>
                      {%- endfor -%}
                    </div>
                  {%- endif -%}

                  {%- if mega_menu_block.settings.images_position == 'right' and mega_menu_images != blank -%}
                    <div class="mega-menu__images-wrapper {% if images_count >= 3 %}mega-menu__images-wrapper--tight{% endif %}">
                      {{- mega_menu_images -}}
                    </div>
                  {%- endif -%}
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- elsif link.links.size > 0 -%}
          <ul hidden id="desktop-menu-{{ forloop.index }}" class="nav-dropdown {% if link.levels == 1 %}nav-dropdown--restrict{% endif %} list--unstyled" role="list">
            {%- for sub_link in link.links -%}
              <li class="nav-dropdown__item {% if sub_link.links.size > 0 %}has-dropdown{% endif %}">
                <a class="nav-dropdown__link link--faded" href="{{ sub_link.url }}" {% if sub_link.links.size > 0 %}aria-controls="desktop-menu-{{ forloop.parentloop.index }}-{{ forloop.index }}" aria-expanded="false"{% endif %}>
                  {{- sub_link.title -}}

                  {%- if sub_link.links.size > 0 -%}
                    {% render 'icon' with 'dropdown-arrow-right', direction_aware: true %}
                  {%- endif -%}
                </a>

                {%- if sub_link.links.size > 0 -%}
                  <ul hidden id="desktop-menu-{{ forloop.parentloop.index }}-{{ forloop.index }}" class="nav-dropdown list--unstyled" role="list">
                    {%- for sub_sub_link in sub_link.links -%}
                      <li class="nav-dropdown__item">
                        <a class="nav-dropdown__link link--faded" href="{{ sub_sub_link.url }}">{{ sub_sub_link.title }}</a>
                      </li>
                    {%- endfor -%}
                  </ul>
                {%- endif -%}
              </li>
            {%- endfor -%}
          </ul>
        {%- endif -%}
2

Hi @vikrant1234

You can create a cookie using javascript on click action and check the cookie value and hide the banner you don’t want on the page.