Remove button around sub menus

Remove button around sub menus

sibouss
Excursionist
51 0 4

I added a custom code to my website to add a circular button around the last menu item. Although now, the button I added also shows up in submenus on mobile and I would like to get rid of it but keep the the button in the main menu bar. If anyone knows how, please let me know.

 

I've added screenshots to better explain the problem.

 

https://578f0e-a2.myshopify.com/ ; password; staoto 

 

Screenshot 2024-04-28 at 1.29.05 AM.pngScreenshot 2024-04-28 at 1.28.42 AM.png

 

 

 

Replies 15 (15)

pawankumar
Shopify Partner
694 100 122

Hi @sibouss 
Please put this code before the body closing tag </body>

 

<style>
.menu-drawer__inner-submenu  .menu-drawer__menu > li:last-child a {
     background: transparent;
    justify-content: flex-start;
}
</style>

 

Thanks!

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
sibouss
Excursionist
51 0 4

where can I find this?

sibouss
Excursionist
51 0 4

thanks this worked but can you check mobile now? for some reason the "iced" menu in the "men's" section seems off...

sibouss
Excursionist
51 0 4

"women's" as well I just noticed... seems like there's still a button but it is transparent. Is there a way to completely remove the button on those submenus and make it look like the other menus while keeping the button on ONLY the main menu of "Current Giveaway"

pawankumar
Shopify Partner
694 100 122

In theme.liquid, please search for closing body tag, you will find it probably at the end of the file, and put this code there

Thanks 

- Need a Shopify developer? Chat on WhatsApp +91-9467121281
- Coffee Tip: Buymeacoffee  | Email: thepkpawankumar@gmail.com
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Best regards,
Pawan
sibouss
Excursionist
51 0 4

thanks yea i figured that part out, did you see my other replies? still trying to fix the sub menus

AnneLuo
Shopify Partner
1293 228 265

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
   @media screen and (max-width: 749px) {
     .menu-drawer__navigation .menu-drawer__menu > li:last-child {
        display: none;
      }
    }
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

sibouss
Excursionist
51 0 4

this removed the current button which I would still like to keep

Made4uo-Ribe
Shopify Partner
10036 2386 3012

Hi @sibouss 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.menu-drawer__navigation .menu-drawer__menu > li:last-child a{
	background: unset;
	border-radius: 0px;
	justify-content: left;
	padding-left: 0px;
}

 

And Save. 

Result:

Made4uoRibe_0-1714307547506.pngMade4uoRibe_1-1714307554279.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
sibouss
Excursionist
51 0 4

this removed the current button, which I would still like to keep

Made4uo-Ribe
Shopify Partner
10036 2386 3012

Oh, its a bit confusing. So you like to remove the oneo n the menu. 

Check this one then. Same instruction. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.header .header__inline-menu .list-menu > li:last-child > a {
    background: unset;
    border-radius: unset; 
    } 

 

And Save. 

Result:

Made4uoRibe_0-1714333450896.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
sibouss
Excursionist
51 0 4

nono... I would like to keep the green button where it says "Current giveaway"  and only have it there

 

I want to remove the green button in the submenus like "women's" and "iced" which appears on mobile✖️

Made4uo-Ribe
Shopify Partner
10036 2386 3012

So much confusing. 😆

Check this one. 

 

a#HeaderDrawer-jewelry-womens, a#HeaderDrawer-jewelry-mens-iced {
    background: unset;
    border-radius: 0px;
    justify-content: left;
    padding-left: 0px;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
sibouss
Excursionist
51 0 4

is there a way to make the code less specific to just "iced" and "women's"?

 

I plan on adding different menus and those are just placeholders at the moment. I would just like the button to stop appearing for submenus.

Made4uo-Ribe
Shopify Partner
10036 2386 3012

This last code is for the iced and woman only. As you can read the code i only call the specific one. Please, try it first. 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.