Remove dropdown arrow from menu - Reformation theme

[GeminiAtelier]

Hi,

Could someone help me remove the dropdown arrow showing next to my "News" menu tittle, it does not have nested menus so I do not understand why it shows an arrow. It also messes with the mobile version, making it un-clickable.

https://geminiatelier.com/

Thank you!

[Moeed]

Hey @GeminiAtelier 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find password.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
a.thb-full-menu--link[href="/collections/news"] svg {
    display: none !important;
}
</style>

RESULT

If I managed to solve your problem then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[GeminiAtelier]

Hi @Moeed,

It does not work, the arrow is still there.

[websensepro]

Hi @GeminiAtelier,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

a[href="/collections/toys"] svg {
    display: none !important;
}

Thanks!

[GeminiAtelier]

Hi @websensepro,

Should I replace "toys" by "news" in the code line as it is the News menu that does not have sub menus?
 

[websensepro]

@GeminiAtelier 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

 a[href="/collections/news"] svg {
    display: none !important;
}

[GeminiAtelier]

Hi @websensepro,
I replace toys with news in the code line and it removed the arrow, but the News menu still behaves like it has sub menus, which it doesn't...
It still open a empty drop down when you hover over it, and same on the mobile version.
How can I remove this?

[websensepro]

a[href="/collections/news"] + .mega-menu-container {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

li.menu-item-has-children > a[href="/collections/news"] {
  pointer-events: auto;
}

 a[href="/collections/news"] svg {
    display: none !important;
}

/* Target the News menu item specifically */
.mobile-menu .link-container.submenu-open {
    /* Disable the toggle behavior of the details element */
    pointer-events: none;
}

/* Ensure the summary acts like a regular link */
.mobile-menu .link-container.submenu-open summary.parent-link {
    cursor: default;
    pointer-events: auto; /* Allow clicking the link itself */
}

/* Hide the arrow icon */
.mobile-menu .link-container.submenu-open .link-forward {
    display: none !important;
}

/* Hide the empty submenu */
.mobile-menu .link-container.submenu-open .sub-menu {
    display: none !important;
}

/* Optional: Style the News link to match other non-dropdown links */
.mobile-menu .link-container.submenu-open .parent-link {
    display: inline-block;
    width: 100%;
    padding: 0; /* Adjust padding to match other links if needed */
}

[GeminiAtelier]

Hi @websensepro,
It works on the desktop version but completely messes with the mobile version, all the arrows disappear and the menu items become un-clickable.
Do you have any idea why the News menu shows an arrow when it has no nested menus? That is the issue I am trying to figure out. The code you gave me can mask the issue but does not remove it.
Thank you so much for your help!

[Dan-From-Ryviu]

Hi @GeminiAtelier 

I recommend you check and remove the blank sub-menu of that News from your store admin > Content > Menus > Main menu

[GeminiAtelier]

Hi @Dan-From-Ryviu,
The News menu does not have sub menus

[Darshan17]

Hi GeminiAtelier,

Would you be open to providing collaborator access? If you grant access, I’ll be able to check the issue on my end and share a solution with you immediately.

Thanks.