How to change dropdown menu to an icon

[Jodiemay]

I am having issues with my dropdown menu on mobile, I’d like it to show a burger menu icon but at the moment there seems to be a problem with the code making it show like the screenshot attached.

URL: www.lonelysundaytattoocare.co.uk

[Arif_Shopidevs]

Hi @Jodiemay
Are you using any premium theme or any hand coded theme. Normally dawn theme has option to show menu like burger icon in mobile.
Custom theme need lots of things to adjust. You need to write custom CSS to hide that in mobile version then set the icon , when icon click the menu need to open.

If you are using any hand coded theme, Our suggestion is to use shopify default dawn theme or any premium theme, which will save your time in the long run.

Let us inform how can we help you.

thank you

[BSSCommerce-HDL]

Hi @Jodiemay

You can follow these steps:

• Go to Online Store → Themes → Edit code

• Find file base.css and paste the code below to end of file

nav.header__inline-menu {
    display: block;
}
ul.list-menu.list-menu--inline {
    position: fixed;
    height: 100vh;
    width: 0;
    background-color: var(--gradient-background);
    top: 10px;
    left: 0px;
    flex-direction: column;
    z-index: 2;
}

nav.header__inline-menu {
    position: relative;
}

sticky-header .list-menu.list-menu--inline li {
    visibility: hidden
}

sticky-header .list-menu.list-menu--inline li:nth-child(1) {
    visibility: visible
}

• Create file bss-custom-js.js


- Paste the code below to file bss-custom-js.js

const createHamburgerIcon = (parent) => {
    const li = document.createElement('li');

    const outerDiv = document.createElement('div');
    outerDiv.setAttribute('bis_skin_checked', '1');
    outerDiv.style.padding = '1.2rem';

    const innerDiv = document.createElement('div');
    innerDiv.setAttribute('bis_skin_checked', '1');
    innerDiv.style.height = '40px';
    innerDiv.style.width = 'fit-content';
    innerDiv.style.border = '2px solid #fff';
    innerDiv.style.borderRadius = '5px';

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 100 80');
    svg.setAttribute('width', '40');
    svg.setAttribute('height', '40');
    svg.style.color = '#fff';
    svg.style.fill = '#fff';

    const rect1 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect1.setAttribute('x', '10');
    rect1.setAttribute('width', '80');
    rect1.setAttribute('height', '12');

    const rect2 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect2.setAttribute('x', '10');
    rect2.setAttribute('y', '30');
    rect2.setAttribute('width', '80');
    rect2.setAttribute('height', '12');

    const rect3 = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect3.setAttribute('x', '10');
    rect3.setAttribute('y', '60');
    rect3.setAttribute('width', '80');
    rect3.setAttribute('height', '12');

    svg.appendChild(rect1);
    svg.appendChild(rect2);
    svg.appendChild(rect3);

    innerDiv.appendChild(svg);

    outerDiv.appendChild(innerDiv);

    li.appendChild(outerDiv);

    li.onclick = () => {
        const ul = document.querySelector('ul.list-menu.list-menu--inline');
        if (ul) {
            const isOpen = ul.style.width === '100%';
            ul.style.width = isOpen ? '0' : '100%';
            const lis = ul.querySelectorAll('li');
            lis.forEach((childLi, index) => {
                if (index === 0) return
                childLi.style.visibility = isOpen ? 'hidden' : 'visible';
            });
        }
    };

    if (parent) {
        parent.insertBefore(li, parent.firstChild); 
    }
};

let checkNodeExist = setInterval(() => {
  const parent = document.querySelector("sticky-header > header > nav > ul");
  if (parent) {
    createHamburgerIcon(parent)
    clearInterval(checkNodeExist);
  }
}, 1000);

setTimeout(() => {
  clearInterval(checkNodeExist);
}, 15000);

• Open theme.liquid and add this code before tag

-Final Result

Result Video