Images are not showing after editing code

Hello all,

I have made some changes to the header and now my logo and other images (like cart and search) don’t appear in the header. The images are created on the DOM with all the divs and are loaded up in the developer console as well but somehow they are not showing up. Can anyone please help?

Theme: Venture

URL: https://vkjdistribution.in/

password: password

Code:


  

    
    
      {% for link in linklists[section.settings.main_linklist].links %}
        {% assign child_list_handle = link.title | handleize %}

        {% if link.links != blank %}
          - {{ link.title }}
              
              
            

            
              

                  {% include 'drawer-nav' %}
              
            

          

        {% else %}
          - {{ link.title }}
            
          

        {% endif %}
      {% endfor %}

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

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

        {% else %}
          - {{ 'layout.customer.account' | t }}
            
          
        {% endif %}
      {% endif %}
    

  

{% schema %}
{
  "name": {
    "cs": "Záhlaví",
    "da": "Overskrift",
    "de": "Titel",
    "en": "Header",
    "es": "Encabezado",
    "fi": "Ylätunniste",
    "fr": "En-tête",
    "hi": "हैडर",
    "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": "image_picker",
      "id": "logo",
      "label": {
        "cs": "Obrázek loga",
        "da": "Logobillede",
        "de": "Logo-Foto",
        "en": "Logo image",
        "es": "Logo",
        "fi": "Logokuva",
        "fr": "Image du logo",
        "hi": "लोगो इमेज",
        "it": "Immagine del logo",
        "ja": "ロゴ画像",
        "ko": "로고 이미지",
        "nb": "Logobilde",
        "nl": "Afbeelding van logo",
        "pl": "Obraz logo",
        "pt-BR": "Imagem do logo",
        "pt-PT": "Imagem do logótipo",
        "sv": "Logobild",
        "th": "รูปภาพโลโก้",
        "tr": "Logo görseli",
        "vi": "Hình ảnh logo",
        "zh-CN": "logo 图片",
        "zh-TW": "標誌圖片"
      }
    },
    {
      "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)",
        "hi": "कस्टम लोगो की चौड़ाई (पिक्सेल)",
        "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 logo 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",
        "hi": "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": "link_list",
      "id": "main_linklist",
      "label": {
        "cs": "Nabídka",
        "da": "Menu",
        "de": "Menü",
        "en": "Menu",
        "es": "Menú",
        "fi": "Valikko",
        "fr": "Menu",
        "hi": "मेनू",
        "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": "header",
      "content": {
        "cs": "Panel oznámení",
        "da": "Meddelelseslinje",
        "de": "Ankündigungsleiste",
        "en": "Announcement bar",
        "es": "Barra de anuncios",
        "fi": "Ilmoituspalkki",
        "fr": "Barre d'annonces",
        "hi": "घोषणा बार",
        "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": "promo_bar_enable",
      "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",
        "hi": "घोषणा दिखाएं",
        "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": "顯示公告"
      }
    },
    {
      "type": "text",
      "id": "promo_bar_text",
      "label": {
        "cs": "Text",
        "da": "Tekst",
        "de": "Text",
        "en": "Text",
        "es": "Texto",
        "fi": "Teksti",
        "fr": "Texte",
        "hi": "टेक्स्ट",
        "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": "文字"
      }
    },
    {
      "type": "url",
      "id": "promo_bar_link",
      "label": {
        "cs": "Odkaz",
        "da": "Link",
        "de": "Link",
        "en": "Link",
        "es": "Enlace",
        "fi": "Linkki",
        "fr": "Lien",
        "hi": "लिंक",
        "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",
        "hi": "वैकल्पिक",
        "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 %}

Removing the “nav-bar” class in the nav tag makes it visible.


It is lying behind the navigation bar and thus not visible. This happens due to incorrect context order.

You can learn more about it here: [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)

@deejay9424 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
@media (min-width:767px){
	.site-header__logo img {
    max-width: 130px;
    position: relative;
    z-index: 9;
    
}

#SiteNavParent > div{
	margin-right: 100px;
}
}

You have a lot of custom coding and actually many other things are broken.
This code will just remedy an underlying greater issue, ideally you’d need to contact your developer to fix it altogether.

Kind regards,
Diego

1 Like

Hello @diego_ezfy Can you please tell me what are the things that are broken, so that I can at least tell the developer to fix those?

Thank you