Hiding Navigation on selected pages ELLA Theme 6.7.1

Store Design
, , , ,
1

Hi all, we currently offer a club shop option on our teamwear website and are currently using ELLA Theme 6.7.1 . Here is the example URL:

This specific club has added our URL to their website and to make it more of a seamless experience, they wanted us to remove our top navigation bars so its almost a stand alone store if that makes sense, as we host quite a few club shops, and they don’t want there students to access other club shops

I have attempted to use code in the theme.liquid, Base.css and even in the menu liquid all to no avail. can anyone help me out with this.

im litteraly looking to hide the following on the page:

header-navigation-vertical-menu.liquid
header-mobile.liquid
header-basic.liquid

i’m actually stumped, and i am no closer to getting it to work.

all other posts in this forum show something like this

{% if page.handle == ‘cherrybrook-club-shop’ %} #shopify-section-header { display: none !important; } .breadcrumbs-container { display: none !important; } {% endif %}

So its time to ask the professionals lol

1 Like
2

@JonathanO can you provide me collab access? I can check and do it

{% if page.handle == ‘cherrybrook-club-shop’ %} #shopify-section-header { display: none !important; } .breadcrumbs-container { display: none !important; } {% endif %}

above one looks correct, but i think id is wrong, instead can you please try this given below

{% if page.handle == ‘cherrybrook-club-shop’ %} .section-header-navigation { display: none !important; } .breadcrumbs-container { display: none !important; } {% endif %}
1 Like
4

@suyash1 i think i have sent you the code :slight_smile:

1 Like
5

Hey @JonathanO,

The requested changes requires to do the custom code in your theme file. Could you please share the 4 digits collab code in the p/m so that I can take a look into it.

Thanks

6

I replied, please check

8

Hi @JonathanO

1. Open:
Online Store > Themes > Edit code > Layout > theme.liquid

2. Find this line (usually near the top or middle):

<body>

3. Right after that, paste this code:

{% if request.path contains 'cherrybrook-club-shop' %}
  <style>
    #shopify-section-header,
    .breadcrumbs-container,
    .header-navigation-vertical-menu,
    .header-mobile,
    .header-basic {
      display: none !important;
    }

    /* Optional: remove top padding so page content moves up */
    main#MainContent {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }
  </style>
{% endif %}

How It Works

  • request.path checks the current page’s URL path.
  • The contains filter matches “cherrybrook-club-shop” anywhere in the URL.
  • You can repeat this logic for other clubs:
{% if request.path contains 'cherrybrook-club-shop' or request.path contains 'another-club-shop' %}