Shopify themes, liquid, logos, and UX
Hey guys,
I've been noticing a lot of brand using these tab selection features and also when hovering your mouse over the wording it also changed colour, changed the square to what tab your on also, was wondering how I that that in my shrine theme as well or if it needs to be custom coded? thanks
Hi @ShaneoDunco , can you kindly share your store URL.
Thanks!
bebehsafe.com
Hi @ShaneoDunco ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
.header__active-menu-item {
color: rgb(255 255 255) !important;
text-decoration: none !important;
font-weight: bold !important;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset:active {
background-color: #cd7cff;
border-radius: 5px;
padding: 5px 10px;
}
.header__menu-item:hover {
color: rgb(253 166 238) !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
how do i create the box colour so I know which tab is selected?
Try the below code:
.header__active-menu-item:active {
color: rgb(255 255 255) !important;
background-color: #cd7cff !important;
border-radius: 5px !important;
padding: 5px 10px !important;
}
Do I replace active menu with this code? I added it in but tab selected is white, selected tab disappears
are you able to help me please?
@ShaneoDunco , remove all previous code and use this one then tell me:
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
}
a.header__menu-item.list-menu__item.link.link--text.focus-inset:active {
background-color: #cd7cff;
border-radius: 5px;
padding: 5px 10px;
color: white !important;
font-weight: bold !important;
}
.header__active-menu-item {
text-decoration: none !important;
}
.header__menu-item:hover {
color: rgb(253 166 238) !important;
}
@ShaneoDunco remove all previous styling and use this then tell me.
it comes up when I click, but the coloured box doesnt stay on the selected tab
are you able to help me please?e
Good day, @ShaneoDunco. Could you kindly provide me with the link to your store?
hello @ShaneoDunco
Can you please send me the Website URL.
Thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024