Re: 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 17 (17)

topnewyork
Globetrotter
633 114 123

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
Subscribe to our youtube channel
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
633 114 123

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
Subscribe to our youtube channel
ShaneoDunco
Excursionist
28 0 7

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

topnewyork
Globetrotter
633 114 123

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
Subscribe to our youtube channel
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
633 114 123

@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
Subscribe to our youtube channel
topnewyork
Globetrotter
633 114 123

@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
Subscribe to our youtube channel
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
998 202 209

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 [email protected] 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/

Sangeetanahar
Trailblazer
555 36 66

hello @ShaneoDunco 

Can you please send me the Website URL.

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:sangeetarahuldhiman -Whatsapp: +917009811712
Checkout Some Free Sections Here
ShaneoDunco
Excursionist
28 0 7

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