Hamburger menu not showing when window width is larger than 769

What do I need to change in the below header.liquid code so the hamburger menu and drop down window ALWAYS shows, not just on mobile (although it does show on desktop when the browser window is width less than 769).


  

    

      

        {% if section.settings.show_announcement or section.settings.header_search_enable %}
          

            {% comment %}
              Add social links to header
            {% endcomment %}

            {% comment %}
            

              {% include 'social-links' %}
            

            {% endcomment %}

            {% if section.settings.show_announcement %}
              
                {% if section.settings.announcement_link != blank %}
                  
                {% endif %}
                  {{ section.settings.header_text | escape }}
                {% if section.settings.announcement_link != blank %}
                  
                {% endif %}
              

            {% elsif section.settings.header_search_enable %}
              
                {% include 'search-bar' with 'header' %}
              

            {% endif %}

          

        {% endif %}

        

          {% if shop.customer_accounts_enabled %}
            

              {% if customer %}
                - {{ 'layout.customer.account' | t }}
                

                - {{ 'layout.customer.log_out' | t | customer_logout_link }}
                

              {% else %}
                - {{ 'layout.customer.log_in' | t | customer_login_link }}
                

                - {{ 'layout.customer.or' | t }}

                - {{ 'layout.customer.create_account' | t | customer_register_link }}
                
              {% endif %}
            

          {% endif %}

          
            
            
              
            
          

          
            
              {{ 'layout.cart.title' | t }}{% unless cart.item_count == 0 %}:{% endunless %}
              {{ cart.item_count }}
            
          

          {% if section.settings.header_search_enable %}
            {% if section.settings.show_announcement %}
              
                {% include 'search-bar' with 'header' %}
              

            {% endif %}
          {% endif %}

        

      

    

    
      {% if section.settings.show_announcement %}
        {% if section.settings.announcement_link != blank %}
          
        {% endif %}
          {{ section.settings.header_text | escape }}
        {% if section.settings.announcement_link != blank %}
          
        {% endif %}
      {% endif %}
    

    
      {% unless section.settings.nav_menu == blank and section.settings.header_search_enable == false and shop.customer_accounts_enabled == false %}
        
      {% endunless %}
      
        
        {{ 'layout.cart.title' | t }} {{ cart.item_count }}
      
    

    {% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
  

  

      {% endif %}

    
  

{% schema %}
{
  "name": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "it": "Header",
    "ja": "ヘッダー",
    "ko": "헤더",
    "nb": "Header",
    "nl": "Koptekst",
    "pl": "Nagłówek",
    "pt-BR": "Cabeçalho",
    "pt-PT": "Cabeçalho",
    "sv": "Rubrik",
    "th": "ส่วนหัว",
    "tr": "Üstbilgi",
    "vi": "Đầu trang",
    "zh-CN": "标头",
    "zh-TW": "標頭"
  },
  "settings": [
    {
      "type": "checkbox",
      "id": "header_search_enable",
      "label": {
        "cs": "Zobrazit lištu vyhledávání",
        "da": "Vis søgelinje",
        "de": "Suchleiste anzeigen",
        "en": "Show search bar",
        "es": "Mostrar barra de búsqueda",
        "fi": "Näytä hakupalkki",
        "fr": "Afficher la barre de recherche",
        "it": "Mostra barra di ricerca",
        "ja": "検索バーを表示する",
        "ko": "검색 바 표시",
        "nb": "Vis søkefelt",
        "nl": "Zoekbalk weergeven",
        "pl": "Pokaż pasek wyszukiwania",
        "pt-BR": "Exibir barra de pesquisa",
        "pt-PT": "Mostrar barra de pesquisa",
        "sv": "Visa sökfältet",
        "th": "แสดงแถบการค้นหา",
        "tr": "Arama çubuğunu göster",
        "vi": "Hiển thị thanh tìm kiếm",
        "zh-CN": "显示搜索栏",
        "zh-TW": "顯示搜尋列"
      }
    },
    {
      "type": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Logo",
        "da": "Logo",
        "de": "Logo",
        "en": "Logo",
        "es": "Logo",
        "fi": "Logo",
        "fr": "Logo",
        "it": "Logo",
        "ja": "ロゴ",
        "ko": "로고",
        "nb": "Logo",
        "nl": "Logo",
        "pl": "Logo",
        "pt-BR": "Logotipo",
        "pt-PT": "Logótipo",
        "sv": "Logotyp",
        "th": "โลโก้",
        "tr": "Logo",
        "vi": "Logo",
        "zh-CN": "logo",
        "zh-TW": "商標"
      },
      "info": {
        "cs": "Doporučujeme 450 x 200 pixelů",
        "da": "450 x 200 pixel anbefales",
        "de": "450 x 200 Pixel empfohlen",
        "en": "450 x 200px recommended",
        "es": "450 x 200px recomendado",
        "fi": "Suositus 450 x 200px",
        "fr": "450 x 200 px recommandé",
        "it": "450 x 200 px consigliato",
        "ja": "450 x 200ピクセルを推奨",
        "ko": "450x200 픽셀 권장",
        "nb": "450 x 200 px anbefales",
        "nl": "450 x 200 px aanbevolen",
        "pl": "Zalecany rozmiar 450 na 200 pikseli",
        "pt-BR": "450 x 200 px recomendado",
        "pt-PT": "450 x 200 píxeis (recomendado)",
        "sv": "450 x 200px rekommenderas",
        "th": "แนะนำขนาด 450 x 200 พิกเซล",
        "tr": "450 x 200 piksel önerilir",
        "vi": "Đề xuất 450 x 200px",
        "zh-CN": "推荐使用 450 x 200 像素大小",
        "zh-TW": "建議使用 450 x 200px"
      }
    },
    {
      "type": "text",
      "id": "logo_max_width",
      "label": {
        "cs": "Šířka vlastního loga (v pixelech)",
        "da": "Tilpasset logobredde (i pixels)",
        "de": "Benutzerdefinierte Logobreite (Pixel)",
        "en": "Custom logo width (in pixels)",
        "es": "Ancho del logo personalizado (en píxeles)",
        "fi": "Mukautettu logon leveys (pikseleinä)",
        "fr": "Largeur personnalisée du logo (en pixels)",
        "it": "Larghezza logo personalizzato (in pixel)",
        "ja": "ロゴの幅をカスタマイズする (ピクセル単位)",
        "ko": "사용자 지정 로고 폭 (픽셀)",
        "nb": "Tilpasset logobredde (i piksler)",
        "nl": "Aangepaste logobreedte (in pixels)",
        "pl": "Niestandardowa szerokość logo (w pikselach)",
        "pt-BR": "Largura do logotipo personalizado (em pixels)",
        "pt-PT": "Largura de logótipo personalizada (em píxeis)",
        "sv": "Anpassad logotypbredd (i pixlar)",
        "th": "ความกว้างของโลโก้แบบกำหนดเอง (เป็นพิกเซล)",
        "tr": "Özel logo genişliği (piksel)",
        "vi": "Chiều rộng logo tùy chỉnh (pixel)",
        "zh-CN": "自定义 logo 宽度(像素)",
        "zh-TW": "自訂標誌寬度 (單位為像素)"
      },
      "default": {
        "cs": "450",
        "da": "450",
        "de": "450",
        "en": "450",
        "es": "450",
        "fi": "450",
        "fr": "450",
        "it": "450",
        "ja": "450",
        "ko": "450",
        "nb": "450",
        "nl": "450",
        "pl": "450",
        "pt-BR": "450",
        "pt-PT": "450",
        "sv": "450",
        "th": "450",
        "tr": "450",
        "vi": "450",
        "zh-CN": "450",
        "zh-TW": "450"
      }
    },
    {
      "type": "header",
      "content": {
        "cs": "Hlavní nabídka",
        "da": "Hovedmenu",
        "de": "Hauptmenü",
        "en": "Main menu",
        "es": "Menú principal",
        "fi": "Päävalikko",
        "fr": "Menu principal",
        "it": "Menu principale",
        "ja": "メインメニュー",
        "ko": "주 메뉴",
        "nb": "Hovedmeny",
        "nl": "Hoofdmenu",
        "pl": "Menu główne",
        "pt-BR": "Menu principal",
        "pt-PT": "Menu principal",
        "sv": "Huvudmeny",
        "th": "เมนูหลัก",
        "tr": "Ana menü",
        "vi": "Menu chính",
        "zh-CN": "主菜单",
        "zh-TW": "主選單"
      }
    },
    {
      "type": "link_list",
      "id": "nav_menu",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "it": "Menu",
        "ja": "メニュー",
        "ko": "메뉴",
        "nb": "Meny",
        "nl": "Menu",
        "pl": "Menu",
        "pt-BR": "Menu",
        "pt-PT": "Menu",
        "sv": "Meny",
        "th": "เมนู",
        "tr": "Menü",
        "vi": "Menu",
        "zh-CN": "菜单",
        "zh-TW": "選單"
      },
      "default": "main-menu"
    },
    {
      "type": "checkbox",
      "id": "nav_below_logo",
      "label": {
        "cs": "Zarovnat hlavní nabídku pod logem na střed",
        "da": "Centrer hovedmenuen under logoet",
        "de": "Hauptmenü unter Logo zentrieren",
        "en": "Center main menu below logo",
        "es": "Centrar el menú principal debajo del logo",
        "fi": "Keskitä päävalikko logon alle",
        "fr": "Centrer le menu principal sous le logo",
        "it": "Centra menu principale sotto il logo",
        "ja": "ロゴの下のメインメニューを中央寄せする",
        "ko": "로고 아래 중앙 주요 메뉴",
        "nb": "Sentrer hovedmeny under logo",
        "nl": "Centreer hoofdmenu onder logo",
        "pl": "Wyśrodkuj menu główne pod logo",
        "pt-BR": "Centralizar menu principal abaixo do logotipo",
        "pt-PT": "Centrar menu principal abaixo do logótipo",
        "sv": "Centrera huvudmeny under logotypen",
        "th": "จัดเมนูหลักใต้โลโก้ให้อยู่ตรงกลาง",
        "tr": "Ana menüyü logonun alt kısmına ortala",
        "vi": "Căn giữa menu chính bên dưới logo",
        "zh-CN": "在 logo 下方居中显示主菜单",
        "zh-TW": "將主選單置中並置於商標下方"
      }
    },
    {
      "type": "checkbox",
      "id": "left_aligned_logo",
      "label": {
        "cs": "Zarovnat logo doleva",
        "da": "Venstrejuster logo",
        "de": "Logo linksbündig ausrichten",
        "en": "Left-align logo",
        "es": "Alinear el logo a la izquierda",
        "fi": "Tasaa logo vasemmalle",
        "fr": "Aligner le logo à gauche",
        "it": "Allinea logo a sinistra",
        "ja": "ロゴを左寄せする",
        "ko": "왼쪽 맞춤 로고",
        "nb": "Venstrejuster logo",
        "nl": "Logo links uitlijnen",
        "pl": "Wyrównaj logo do lewej",
        "pt-BR": "Alinhar logotipo à esquerda",
        "pt-PT": "Alinhar logótipo à esquerda",
        "sv": "Vänsterjustera logotypen",
        "th": "จัดโลโก้ชิดซ้าย",
        "tr": "Logoyu sola hizala",
        "vi": "Căn trái logo",
        "zh-CN": "左对齐 logo",
        "zh-TW": "將商標靠左對齊"
      }
    },
    {
      "type": "checkbox",
      "id": "show_header_lines",
      "label": {
        "cs": "Zobrazit v záhlaví oddělovací čáry",
        "da": "Vis skillelinjer i sidehoved",
        "de": "Trennlinien in Header anzeigen",
        "en": "Show divider lines in header",
        "es": "Mostrar líneas divisorias en el encabezado",
        "fi": "Näytä väliviivat otsikossa",
        "fr": "Afficher les lignes de séparation dans l'en-tête",
        "it": "Mostra linee divisorie nell'header",
        "ja": "ヘッダーに分割線を表示する",
        "ko": "제목에 구분선 표시",
        "nb": "Vis skillelinjer i topptekst",
        "nl": "Toon scheidingslijnen in koptekst",
        "pl": "Pokaż linie podziału w nagłówku",
        "pt-BR": "Exibir linhas divisórias no cabeçalho",
        "pt-PT": "Mostrar linhas divisórias no cabeçalho",
        "sv": "Visa delningslinjer i rubriken",
        "th": "แสดงเส้นแบ่งในส่วนหัว",
        "tr": "Ayırıcı çizgileri üstbilgide göster",
        "vi": "Hiển thị dòng phân chia ở đầu trang",
        "zh-CN": "在标头中显示分割线",
        "zh-TW": "在標頭中顯示分隔線"
      }
    },
    {
      "type": "header",
      "content": {
        "cs": "Panel oznámení",
        "da": "Meddelelseslinje",
        "de": "Ankündigungsbereich",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "it": "Barra degli annunci",
        "ja": "告知バー",
        "ko": "공지 표시줄",
        "nb": "Kunngjøringslinje",
        "nl": "Aankondigingsbalk",
        "pl": "Pasek ogłoszeń",
        "pt-BR": "Barra de avisos",
        "pt-PT": "Barra de comunicado",
        "sv": "Meddelandefält",
        "th": "แถบประกาศ",
        "tr": "Duyuru çubuğu",
        "vi": "Thanh thông báo",
        "zh-CN": "公告栏",
        "zh-TW": "公告列"
      }
    },
    {
      "type": "checkbox",
      "id": "show_announcement",
      "label": {
        "cs": "Zobrazit oznámení",
        "da": "Vis meddelelse",
        "de": "Ankündigung anzeigen",
        "en": "Show announcement",
        "es": "Mostrar anuncio",
        "fi": "Näytä ilmoitus",
        "fr": "Afficher l'annonce",
        "it": "Mostra annuncio",
        "ja": "告知を表示する",
        "ko": "공지 표시",
        "nb": "Vis kunngjøring",
        "nl": "Aankondiging weergeven",
        "pl": "Pokaż ogłoszenie",
        "pt-BR": "Exibir comunicado",
        "pt-PT": "Mostrar comunicado",
        "sv": "Visa tillkännagivande",
        "th": "แสดงประกาศ",
        "tr": "Duyuruyu göster",
        "vi": "Hiển thị thông báo",
        "zh-CN": "显示公告",
        "zh-TW": "顯示公告"
      },
      "default": true
    },
    {
      "type": "text",
      "id": "header_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "it": "Testo",
        "ja": "テキスト",
        "ko": "텍스트",
        "nb": "Tekst",
        "nl": "Tekst",
        "pl": "Tekst",
        "pt-BR": "Texto",
        "pt-PT": "Texto",
        "sv": "Text",
        "th": "ข้อความ",
        "tr": "Metin",
        "vi": "Văn bản",
        "zh-CN": "文本",
        "zh-TW": "文字"
      },
      "default": {
        "cs": "Tady můžete zadat oznámení",
        "da": "Meddel noget her",
        "de": "Hier etwas ankündigen",
        "en": "Announce something here",
        "es": "Anuncia algo aquí",
        "fi": "Ilmoita jotakin tässä",
        "fr": "Annoncez quelque chose ici",
        "it": "Annuncia qualcosa qui",
        "ja": "ここで告知してください",
        "ko": "여기에 공지하십시오",
        "nb": "Kunngjør noe her",
        "nl": "Kondig hier iets aan",
        "pl": "Ogłoś coś tutaj",
        "pt-BR": "Anuncie algo aqui",
        "pt-PT": "Anunciar algo aqui",
        "sv": "Meddela något här",
        "th": "ประกาศข้อความที่นี่",
        "tr": "Buraya bir duyuru ekleyin",
        "vi": "Thông báo điều gì đó tại đây",
        "zh-CN": "在此处进行公告",
        "zh-TW": "在此公告資訊"
      }
    },
    {
      "type": "url",
      "id": "announcement_link",
      "label": {
        "cs": "Odkaz",
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "it": "Link",
        "ja": "リンク",
        "ko": "링크",
        "nb": "Kobling",
        "nl": "Link",
        "pl": "Link",
        "pt-BR": "Link",
        "pt-PT": "Ligação",
        "sv": "Länk",
        "th": "ลิงก์",
        "tr": "Bağlantı",
        "vi": "Liên kết",
        "zh-CN": "链接",
        "zh-TW": "連結"
      },
      "info": {
        "cs": "Volitelné",
        "da": "Valgfri",
        "de": "Optional",
        "en": "Optional",
        "es": "Opcional",
        "fi": "Valinnainen",
        "fr": "Facultatif",
        "it": "Facoltativo",
        "ja": "オプション",
        "ko": "선택 사항",
        "nb": "Valgfritt",
        "nl": "Optioneel",
        "pl": "Opcjonalnie",
        "pt-BR": "Opcional",
        "pt-PT": "Opcional",
        "sv": "Valfritt",
        "th": "ไม่จำเป็น",
        "tr": "İsteğe bağlı",
        "vi": "Không bắt buộc",
        "zh-CN": "可选",
        "zh-TW": "(選填)"
      }
    }
  ]
}
{% endschema %}

Hi @Justin_MWMW

Unfortunately, this requires complex coding and cannot be achieve with just the code you provided. If you use the Shopify free theme, which seems you are not, there is an option to use the drawer menu. We can write the code with competitive pricing and faster turnaround if your interested . Let us know if you would like to proceed

Perhaps another option - can you point me to where the code is that activates the hamburger menu when the width of the browser is less than 770 pixels wide? Could that be changed to something like 3000 pixels instead…

You didn’t provide the CSS. Can you provide your website instead so I can take a look? The mobile-nav.liquid under Snippet folder is the where the drawer is

Hi @Justin_MWMW

It seems your theme is easy to edit. Try the code below to have a hamburger menu

  1. From the Admin page, go to Online Store > Themes
  2. Select the theme you want to edit, click the three dots to edit code
  3. Under the Asset folder, open the timber.scss.css
  4. Then place the code below at the very bottom of the file and SAVE
@media only screen and (min-width: 769px) {
.wrapper.post-large--hide{
 display: block !important; 
}
.wrapper.medium-down--hide {
display: none !important; 
}
}

Please click ‘Like’ and mark it as ‘Solution’ if you find it helpful.

The hamburger menu now successfully shows at all times, but doesn’t activate the sub menu unless it’s width is low.

Unfortunately, you have to find this code in your theme and delete it. It cannot be done using CSS only. I am not familiar with your theme, so I cannot direct you to the right file to look. The tedious way is to open all your files, and click Ctrl + F, and place id=“MobileNav”, if you find it. Just delete the post-large–hide next to it. See image below

Beautiful. I recognize that snippet, had been looking at this all day. It was in mobile-nav.liquid, updated it there like you showed, and it’s now showing at all times and showing the submenu. A slight adjustment needed to get the text in the submenu to line up with the hamburger and not the edge, but I’ll tackle that tomorrow.

Coffee tip sent your way. THANK YOU!!!

Oh wow, didn’t expect it. Thank you :blush:

You can align your submenu by adding the code below in your theme.scss.css

ul#MobileNav {
    max-width: 1030px;
    margin: auto;
}

Result