How can I remove duplicate links in a mobile menu using CSS?

[biznazz101]

Hello, I am building a store using the "Fresh" theme. The navigation menu looks fine on desktop/tablet but on mobile the menu drawer displays all the links twice. (I am guessing it is due to the topbar menu part of the header)

Is there a way to hide or remove these using CSS without effecting the normal header menu?
Here is the link:
https://hziz8w30dfq0hksl-85943648529.shopifypreview.com

Desktop:

Mobile:

Thanks for the help everyone!

[BrewBrains · Accepted solution]

Hi @biznazz101 ,

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid

<script>
const menuItems = document.querySelectorAll('#mobile-menu--main-menu li');
let uniqueItems = [];
menuItems.forEach(item => {
    const text = item.textContent.trim(); 
    if (text !== '' && !uniqueItems.includes(text)) {
        uniqueItems.push(text); 
    } else {
        item.style.display = 'none'; 
    }
});
</script>

Was my reply helpful? Click Like to let me know!

Was your question answered? Mark it as an Accepted Solution.