On click of the burger menu, swap logos.

kuduzovic
Tourist
9 0 1

Hi, so recently I've been having some trouble with my Shopify/Javascript code. I have a burger menu icon that when is pressed, a slide comes from the left side all the way to the right which makes the dropdown menu full screen. This works fine, but now I'm having trouble with swapping the logo on click of the burger icon. 

Here is my Liquid/ HTML code:

{%- assign logo_transparent = section.settings.logo-transparent -%}
{%- assign logo_white = section.settings.logo-white -%}

<div class="main-nav">
    <div class="logo-transparent_wrapper" id="logo-transparent_wrapper">
        <img class="logo-transparent" id="logo-transparent" src="{{section.settings.logo-transparent | img_url }}"
            width="{{section.settings.logo-size}}px">
    </div>
    <div class="logo-white_wrapper" id="logo-white_wrapper">
        <img class="logo-white" id="logo-white" src="{{section.settings.logo-white | img_url }}">
    </div>
    <div class="nav-list">
        {% for link in linklists[section.settings.header-menu].links %}
        <ul class="nav-links">
            <li><a href="{{ link.url }}">{{ link.title }}</a></li>
        </ul>
        {% endfor %}
    </div>
    <div class="cart-icon">
        {% render 'cart-icon' %}
    </div>
    <div class="burger" id="burger" onclick="changeImage()">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</div>
{% schema %}
{
"name": "Header",
"settings": [
{
"id": "logo-transparent",
"type": "image_picker",
"label": "Logo Transparent"
},
{
"id": "logo-white",
"type": "image_picker",
"label": "Logo White"
},
{
"id": "logo-size",
"type": "range",
"min": 70,
"max": 120,
"step": 10,
"unit": "px",
"label": "Logo Size",
"default": 90
},
{
"id": "header-menu",
"type": "link_list",
"label": "Header Menu"
}
]
}
{% endschema %}

 Basically what I saw somewhere was that you can assign a schema to a word, and then use that in javascript by putting it in a variable. I tried a few different options but none of them worked, but what I feel like would be the best approach is something like this: 

var logoTransparent = `{{ logo_transparent }}`;
var logoWhite = `{{ logo_white }}`;
var navActive = document.querySelector(".nav-active");

function changeImage() {

    if (navActive.style.position = 'absolute') 
    {
        logoTransparent.src.style.display = "none";
        logoWhite.src.style.display = "block";
    }
    else 
    {
        logoTransparent.src.style.display = "block";
        logoWhite.src.style.display = "none";
    }
}

 By using the if/ else code, and doing something like if the burger menu is activated, hide the normal logo, and use the other one, but this didn't work either. I'm not really that good at javascript, so the code above might be wrong completely, but any help would be appreciated, thanks.

0 Likes