Dawn temamda mobil menü ikonunu değiştirmek istiyorum, CSS eklediğimde hiç etkisi olmuyor

Forumlar Dawn temamda mobil menü ikonunu değiştirmek istiyorum, CSS eklediğimde hiç etkisi olmuyor

  • Gönderi
    Can M.
    Katılımcı
    none
    Geçen ay yeni bir ürün lansmanı için Dawn temamı kullandığım mağazamda mobil menüdeki hamburger ikonunu daha modern bir SVG’ye çevirmek istedim. 3 hafta önce theme.css.liquid dosyasına şu kodu ekledim:

    “`css
    .mobile-nav__toggle .icon {
    background-image: url(‘https://example.com/my-icon.svg’);
    background-size: contain;
    }
    “`

    Fakat mobilde ikon hâlâ klasik üç çizgili hâliyle görünüyor, yeni SVG hiç devreye girmiyor. Admin panelinde Online Store > Themes > Actions > Edit code yolunu izleyerek dosyayı güncelledim, kaydettiğimde “Değişiklikler kaydedildi” mesajı çıkıyor. Aynı dosyayı bir iki kez daha açıp kodu kontrol ettim, orada eksik bir kapanış parantezi olmadığını da gördüm.

    Denediğim diğer yöntemler:
    – `theme.liquid` içinde `{{ ‘theme.css’ | asset_url | stylesheet_tag }}` satırının doğru yüklendiğini teyit ettim.
    – `Assets` kısmına aynı SVG’yi yeni bir dosya olarak ekleyip URL’yi `{{ ‘my-icon.svg’ | asset_url }}` ile çağırdım, yine aynı sonuç.
    – Chrome DevTools’ta mobil görünümde `.mobile-nav__toggle .icon` seçicisini aradığımda stilin uygulanmadığını gördüm; muhtemelen başka bir CSS kuralı üzerine yazıyor olabilir diye `!important` ekleyerek denedim, ama bir fark yok.

    Şimdi takıldığım nokta: Dawn teması içinde menü ikonunu değiştirmek için doğru selector ne olmalı? Ya da bu ikon aslında `svg` tagı içinde mi render ediliyor, yani background-image yerine doğrudan SVG içeriğini değiştirmem gerekir mi? Bir de `theme.css.liquid` yerine `base.css` dosyasına eklemek gerekebilir mi diye düşünüyorum.

    Benim gibi birileri bu sorunu çözdü mü? Hangi dosyada ya da hangi adımla ikon değiştirilebilir? Yardımcı olursanız çok sevinirim 🙏

  • Bu konuyu yanıtlamak için giriş yapmış olmalısınız.