Menu repeating itself

[Alyssa4965]

My top menu keep repeating itself multiple times. Solution please. https://www.diversifiedgiftsonline.com/

[BSSCommerce-TA]

Hi, @Alyssa4965 . You can follow these steps: 

Step 1: Access the theme editing section

In the admin panel, select "Online Store" from the left navigation bar. In the "Themes" section, you'll see your store's current theme. Click the "Customize" button to open the customization interface.

Step 2: Open the theme source code editor

In the top right corner of the Customize page, you'll see a button with a three-dot icon (⋮). Click on it. Select "Edit code" from the drop-down menu.

Step 3: Edit source code

The source code editor will open, allowing you to edit the theme files. Select the "base.css" file or "theme.css" file and paste the CSS code below at the top:

.tt-parent-box:nth-child(3) {
    display: none; 
}

Step 5: Save changes

Click the "Save" button in the top right corner to save your changes.

Result will look like this: 

[Alyssa4965]

It's still repeating. Check

where i pasted the code

[BSSCommerce-TA]

@Alyssa4965 , I see it worked: Diversified Gifts and Awards (diversifiedgiftsonline.com)

Please check again.

[BSSCommerce-TA]

@Alyssa4965 , this time it will definitely work. I also tried scrolling up and down the website. Remove the CSS code you just added, paste this CSS  instead: 

.tt-obj-options .tt-desctop-parent-account.tt-parent-box {
    display: none;
}

.tt-obj-options .tt-desctop-parent-account.tt-parent-box:last-of-type {
    display: block;
}

If my solution works, please mark it as solution.

[Alyssa4965]

I tried putting it in my theme.css and also style.rtl.css same thing please. My website also have an header liquid for the top menu item. Should i try it there but what i can only see is div

[BSSCommerce-TA]

@Alyssa4965 , replace it with this code and place it at the bottom of the theme.css.liquid file: 

.tt-obj-options .tt-desctop-parent-account.tt-parent-box {
    display: none !important;
}

.tt-obj-options .tt-desctop-parent-account.tt-parent-box:last-of-type {
    display: block !important;
}

[Alyssa4965]

It's still the same thing, i really don't know why it's still popping up

[BSSCommerce-B2B]

Hi @Alyssa4965 ,

When you scroll down and then scroll back up, it automatically adds an item.

I think there is a piece of JavaScript causing this, but I don't have your code to check.
You can try the following CSS:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.tt-desctop-parent-account:has(~ .tt-desctop-parent-account) {
    display: none;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[Alyssa4965]

I've pasted it on both style.rtl.css and theme.css it's till on repeat

[Alyssa4965]

It usually repeat when i scroll down the webpage and go back up again

[BSSCommerce-B2B]

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert the below code at the bottom of the file -> Save

<script>
setTimeout(() => {
    let isChangedHeader = false;
    const targetNode = document.querySelector(".tt-obj-options:has(.icon-f-39)");
    
    if (!targetNode) {
        console.error("Target node not found");
        return;
    }

    const config = { attributes: true, childList: true, subtree: true };
    const callback = (mutationList, observer) => {
        mutationList.forEach((mutation) => {
            if (isChangedHeader) {
                observer.disconnect();
                return;
            }
            if (mutation.target.children.length > 0 && !isChangedHeader) {
                isChangedHeader = true;
                mutation.target.remove();
            }
        });
    };
    
    const observer = new MutationObserver(callback);
    observer.observe(targetNode, config);
}, 2000);
</script>

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[Alyssa4965]

Should i paste it before </body> as shown in the image or where should i put the code please

[Alyssa4965]

Any help please