Shopify themes, liquid, logos, and UX
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
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!
where can I find this?
thanks this worked but can you check mobile now? for some reason the "iced" menu in the "men's" section seems off...
"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"
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
thanks yea i figured that part out, did you see my other replies? still trying to fix the sub menus
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!
this removed the current button which I would still like to keep
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
this removed the current button, which I would still like to keep
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:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
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✖️
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!
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.
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.
In Canada, payment processors, like those that provide payment processing services t...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025