Created a custom navigation but not working in mobile view

Store Design
1

Hi Everyone,

I created a custom navigation for one page which is different from the rest of my site. It works fine on desktop view; however, once I shrink the page or use it on a mobile, the toggle does not display show the dropdown with the menu. The initial code I used to block the main site header is:

div#shopify-section-header { display: none; }

I’m thinking all I need is to point this hidden feature only to the main header on that page but not the secondary header that I created since it is removing some functions. All of the other buttons work correctly except for this piece. Any help on this would be greatly appreciated. This is the page that is currently giving me issues: https://www.patrickshatner.com/pages/sekse-home

Thanks,

Patrick

Screen Shot 2022-04-03 at 1.51.40 PM.png
Screen Shot 2022-04-03 at 1.51.40 PM.png776×582 129 KB

1 Like
2

@lennoxox

oh sorry for that issue i can’t see that code but If you’re comfortable working with coding languages (eg. HTML, JavaScript, CSS, and Liquid), then you can try to follow the custom coding provided by Custom Mobile Menu Example

3

Thanks KetanKumar - would that mean that the navigation piece that currently works on desktop would have to be modified separately when making changes? Seems that I am missing one minor detail on the current code that I have since all the functions are present.

4

@lennoxox

yes but i can’t see can you please share your used demo custom code ?

5

Yes definitely. In short, not much custom other than creating a duplicate file of the header section targeted specifically for that page and adding the blocker for the original section header. Thanks for looking at this.
For the Page:

div#shopify-section-header { display: none; }

{% section ‘sekse-header’ %}
{% section ‘sekse-slideshow’ %}

Then the details for the header navigation within ‘sekse-header’ which is not currently working.

{% if section.settings.logo_placement == ‘center’ %}

{% render 'search' %}
{% endif %}
{% if section.settings.logo_placement == 'left' %} {% render 'search' %} {% endif %}
{% render 'localization-selectors', showLocaleSelector: section.settings.showLocaleSelector, showCurrencySelector: section.settings.showCurrencySelector %}

{% render ‘navigation’, section: section %}

{% if section.settings.fullBleed %} {%- capture rgb -%} {{ settings.fullBleedColor | color_extract: 'red' }}, {{ settings.fullBleedColor | color_extract: 'green' }}, {{ settings.fullBleedColor | color_extract: 'blue' }} {%- endcapture -%} @media screen and (min-width: 721px) { .main-header.is-fullbleed:not(:hover):not(.search-open) .header-logo a, .main-header.is-fullbleed:not(:hover):not(.search-open) .navigation-list-item a, .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal .form-input, .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal svg, .main-header.is-fullbleed:not(:hover):not(.search-open) .localization-selector button, .main-header.is-fullbleed:not(:hover):not(.search-open) .header-tools .header-account>a, .main-header.is-fullbleed:not(:hover):not(.search-open) .header-tools .header-cart>a, .main-header.is-fullbleed:not(:hover):not(.search-open) .scroll-left::before, .main-header.is-fullbleed:not(:hover):not(.search-open) .scroll-right::before { color: {{ settings.fullBleedColor }}; -moz-osx-font-smoothing: grayscale; -moz-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; } .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal .form-input::-webkit-input-placeholder { color: {{ settings.fullBleedColor }}; } .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal .form-input::-moz-placeholder { color: {{ settings.fullBleedColor }}; } .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal .form-input::-ms-placeholder { color: {{ settings.fullBleedColor }}; } .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form-style-minimal .form-input::placeholder { color: {{ settings.fullBleedColor }}; } .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-submit, .main-header.is-fullbleed:not(:hover):not(.search-open) .localization-selector button, .main-header.is-fullbleed:not(:hover):not(.search-open) .header-search-form .form-input { border-color: {{ settings.fullBleedColor }}; } } {% endif %}
6

@lennoxox

i mean which demo do you have use custom navigation?

7

I am using the navigation that came with template “Capital”.

8

@lennoxox

you mean you have used Capital Shopify Theme
if you have default issue can you please contact Theme Support team

9

Correct, but it is not a default issue since the default navigation works. Adding the code below blocks the original navigation as it is meant to do, but then when adding a duplicate heading code for the specific page the drop down toggle doesn’t work due to this added code:
div#shopify-section-header {
display: none;
}

10

@lennoxox ,

I can help, it seems you have different navigation and header for Home Page & sekse-home Page and the Hamburger Menu For Mobile Menu is not working on sekse-home. You can connect with me via Whatsapp.
Thank You!

11

it seems you have different navigation and header for Home Page & sekse-home Page and the Hamburger Menu For Mobile Menu is not working on sekse-home.

12

Would it mean that when making modifications, the navigation element that now functions on desktop would have to be adjusted separately? Since all of the functions are present, it appears that I am missing one tiny aspect in the existing code.

13

Correct, having two different menus is my intention. The only thing not working is the toggle for the mobile menu which I am trying to fix. Not sure what’s causing the issue.