Help with shrine theme header tabs/colour and hover effect

[ShaneoDunco]

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

 

[topnewyork]

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

Thanks!

[ShaneoDunco]

bebehsafe.com

[ShaneoDunco]

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

[topnewyork]

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!

[ShaneoDunco]

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

[topnewyork]

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

[ShaneoDunco]

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

[ShaneoDunco]

are you able to help me please?

[topnewyork]

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

[topnewyork]

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

[ShaneoDunco]

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

[ShaneoDunco]

are you able to help me please?e

[Huptech-Web]

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

[ShaneoDunco]

https://bebehsafe.com/

[ShaneoDunco]

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

[ShaneoDunco]

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