Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Help with shrine theme header tabs/colour and hover effect

Help with shrine theme header tabs/colour and hover effect

ShaneoDunco
Excursionist
28 0 7

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

 

asdddd.JPG

Replies 16 (16)

topnewyork
Globetrotter
748 124 139

Hi @ShaneoDunco , can you kindly share your store URL.

Thanks!

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
ShaneoDunco
Excursionist
28 0 7

bebehsafe.com

ShaneoDunco
Excursionist
28 0 7

website im trying to copy the header - https://thekrafty-co.com/

topnewyork
Globetrotter
748 124 139

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>

 

 

topnewyork_0-1725268084126.png

 

 

 

 

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
ShaneoDunco
Excursionist
28 0 7

how do i create the box colour so I know which tab is selected?

topnewyork
Globetrotter
748 124 139

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;
}
Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
ShaneoDunco
Excursionist
28 0 7

Do I replace active menu with this code? I added it in but tab selected is white, selected tab disappears 

ShaneoDunco
Excursionist
28 0 7

are you able to help me please?

topnewyork
Globetrotter
748 124 139

@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;
}

 

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
topnewyork
Globetrotter
748 124 139

@ShaneoDunco  remove all previous styling and use this then tell me.

Need a Shopify developer?
Hire us at Top New York Web Design
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Try Big Bulk Discount To Boost Your Store Sales with Volume/Tier Discount
ShaneoDunco
Excursionist
28 0 7

it comes up when I click, but the coloured box doesnt stay on the selected tab

ShaneoDunco
Excursionist
28 0 7

are you able to help me please?e

Huptech-Web
Shopify Partner
1010 204 217

Good day, @ShaneoDunco. Could you kindly provide me with the link to your store?

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
ShaneoDunco
Excursionist
28 0 7
ShaneoDunco
Excursionist
28 0 7

website im trying to copy - https://thekrafty-co.com/

ShaneoDunco
Excursionist
28 0 7

website im trying to copy https://thekrafty-co.com/ vs mine bebehsafe.com