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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024