Shopify themes, liquid, logos, and UX
Hi there, I would like to have the underline on my hover and active navigation items offset, and in line with the bottom of the panel of the header, similar to how it looks here
my store is
https://boogie-beans.myshopify.com/
password is yuteld
pls advise how i can add code to do this 🙂
Solved! Go to the solution
This is an accepted solution.
@annabelleg21
Hii,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid
.header__menu-item:active {
border-bottom: 2px solid #000;
}
.header__menu-item:hover {
color: rgb(var(--color-foreground));
border-bottom: 2px solid #000;
}
remove this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid
.header__menu-item:hover span {
text-decoration: underline;
text-underline-offset: .3rem;
}
This is an accepted solution.
Hello @annabelleg21
Greetings!!
Online Store->Theme->Edit code->Assets->base.css.liquid and Add this css at the bottom of file
Out put : https://nimb.ws/WyUIDC
.list-menu__item{padding-bottom:0;}
.header__inline-menu > ul span.header__active-menu-item, .header__inline-menu > ul .header__menu-item, .header__inline-menu > ul .header__menu-item:hover span { position: relative;text-decoration: none;}
.header__inline-menu > ul .header__menu-item span{ padding: 1.2em 1.2em 20px;}
.header__inline-menu > ul span.header__active-menu-item:after , .header__inline-menu > ul .header__menu-item:hover:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration:none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
.header__inline-menu .header__submenu .header__menu-item:hover:after{content:unset;}
.header__inline-menu>ul .header__submenu .header__menu-item span{padding:0}
This is an accepted solution.
Thanks for this. I've implemented this but have a couple of questions. How can i stop the hover state line being wider than the active state line? i want them to be the same width (ideally active state width).
Also, the line on click of the menu item is too thick or sometimes seems to double up, how can i reduce it?
Is there a way i can get the SHOP Menu item to remain active when clicking through to a product ? at the moment it disappears
Lastly, is there a way i can reduce the space slightly between the logo and the menu items, similar to bybillie?
Many thanks
This is an accepted solution.
Hello @annabelleg21
Greetings!!
1. stop the hover state line from being wider than the active state line
Ans:
Online Store->Theme->Edit code->Assets->base.css.liquid and find this line
.header__inline-menu>ul span.header__active-menu-item:after, .header__inline-menu>ul .header__menu-item:hover:after
Replace with this line
.header__inline-menu>ul span.header__active-menu-item:after, .header__inline-menu>ul .header__menu-item:hover span:after
2. This code for, "Is there a way I can get the SHOP Menu item to remain active when clicking through to a product? at the moment it disappears"
Ans:
Online Store->Theme->Edit code->Layouts->theme.liquid and Add this code at the bottom of file
{% if template.name == 'collection' or if template.name == 'product' %}
.list-menu.list-menu--inline>li:first-child span {
position: relative;
}
<style>
.list-menu.list-menu--inline>li:first-child span:after{
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration: none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
</style>
{% endif %}
3. reduce the space slightly between the logo and the menu items
Ans:
Online Store->Theme->Edit code->Assets->base.css.liquid and Add this css at the bottom of file
.list-menu__item { padding-bottom: 0; padding-top: 0;
}
.header--top-center .header__inline-menu{margin:0 !important;}
.header--top-center .header__heading-link{padding:0 !important;}
Output : https://prnt.sc/jTjxcfrW4xfU
This is an accepted solution.
Thanks so much. Almost there.
1) Point 2 didn't seem to work. i inserted the code but can't see any change. any other ideas?
2) how do i get rid of the click state for the menu items (currently when you click on the menu item, the line underneath goes wider and offset, i just want it to be the same as the active state in look and feel when you click)
Cheers
This is an accepted solution.
Hello @annabelleg21,
Greetings!!
My mistake
Can you please again paste this code as instructions
This code for, "Is there a way I can get the SHOP Menu item to remain active when clicking through to a product? at the moment it disappears"
Ans:
Online Store->Theme->Edit code->Layouts->theme.liquid and Add this code at the bottom of file
{% if template.name == 'collection' or template.name == 'product' %}
<style>
.list-menu.list-menu--inline>li:first-child span {
position: relative;
}
.list-menu.list-menu--inline>li:first-child span:after{
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration: none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
</style>
{% endif %}
This is an accepted solution.
Hello @annabelleg21,
Greetings!!
Add this CSS for 2nd point
Online Store->Theme->Edit code->Assets->base.css.liquid and find this line
.header__menu-item:active {border-bottom: none !important;}
This is an accepted solution.
@annabelleg21
Hii,
Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid
.header__menu-item:active {
border-bottom: 2px solid #000;
}
.header__menu-item:hover {
color: rgb(var(--color-foreground));
border-bottom: 2px solid #000;
}
remove this css at the bottom of Online Store->Theme->Edit code->Assets->base.css.liquid
.header__menu-item:hover span {
text-decoration: underline;
text-underline-offset: .3rem;
}
Hi! I'm trying to do something similar with my shop and can't find the solution anywhere. URL is https://www.nowave.com/pages/extraction-processes
You'll notice on hover the text on the featured nav turns red and underlines, i want the active menu item to stay underlined and red when I am on that page. Any help would be great! thanks!
This is an accepted solution.
Hello @annabelleg21
Greetings!!
Online Store->Theme->Edit code->Assets->base.css.liquid and Add this css at the bottom of file
Out put : https://nimb.ws/WyUIDC
.list-menu__item{padding-bottom:0;}
.header__inline-menu > ul span.header__active-menu-item, .header__inline-menu > ul .header__menu-item, .header__inline-menu > ul .header__menu-item:hover span { position: relative;text-decoration: none;}
.header__inline-menu > ul .header__menu-item span{ padding: 1.2em 1.2em 20px;}
.header__inline-menu > ul span.header__active-menu-item:after , .header__inline-menu > ul .header__menu-item:hover:after {
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration:none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
.header__inline-menu .header__submenu .header__menu-item:hover:after{content:unset;}
.header__inline-menu>ul .header__submenu .header__menu-item span{padding:0}
This is an accepted solution.
Thanks for this. I've implemented this but have a couple of questions. How can i stop the hover state line being wider than the active state line? i want them to be the same width (ideally active state width).
Also, the line on click of the menu item is too thick or sometimes seems to double up, how can i reduce it?
Is there a way i can get the SHOP Menu item to remain active when clicking through to a product ? at the moment it disappears
Lastly, is there a way i can reduce the space slightly between the logo and the menu items, similar to bybillie?
Many thanks
This is an accepted solution.
Hello @annabelleg21
Greetings!!
1. stop the hover state line from being wider than the active state line
Ans:
Online Store->Theme->Edit code->Assets->base.css.liquid and find this line
.header__inline-menu>ul span.header__active-menu-item:after, .header__inline-menu>ul .header__menu-item:hover:after
Replace with this line
.header__inline-menu>ul span.header__active-menu-item:after, .header__inline-menu>ul .header__menu-item:hover span:after
2. This code for, "Is there a way I can get the SHOP Menu item to remain active when clicking through to a product? at the moment it disappears"
Ans:
Online Store->Theme->Edit code->Layouts->theme.liquid and Add this code at the bottom of file
{% if template.name == 'collection' or if template.name == 'product' %}
.list-menu.list-menu--inline>li:first-child span {
position: relative;
}
<style>
.list-menu.list-menu--inline>li:first-child span:after{
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration: none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
</style>
{% endif %}
3. reduce the space slightly between the logo and the menu items
Ans:
Online Store->Theme->Edit code->Assets->base.css.liquid and Add this css at the bottom of file
.list-menu__item { padding-bottom: 0; padding-top: 0;
}
.header--top-center .header__inline-menu{margin:0 !important;}
.header--top-center .header__heading-link{padding:0 !important;}
Output : https://prnt.sc/jTjxcfrW4xfU
This is an accepted solution.
Thanks so much. Almost there.
1) Point 2 didn't seem to work. i inserted the code but can't see any change. any other ideas?
2) how do i get rid of the click state for the menu items (currently when you click on the menu item, the line underneath goes wider and offset, i just want it to be the same as the active state in look and feel when you click)
Cheers
This is an accepted solution.
Hello @annabelleg21,
Greetings!!
My mistake
Can you please again paste this code as instructions
This code for, "Is there a way I can get the SHOP Menu item to remain active when clicking through to a product? at the moment it disappears"
Ans:
Online Store->Theme->Edit code->Layouts->theme.liquid and Add this code at the bottom of file
{% if template.name == 'collection' or template.name == 'product' %}
<style>
.list-menu.list-menu--inline>li:first-child span {
position: relative;
}
.list-menu.list-menu--inline>li:first-child span:after{
position: absolute;
content: "";
bottom: 0;
left: 0;
width: 100%;
opacity: 1;
transform: scale(1);
text-decoration: none;
transform-origin: left center;
border-bottom: 2px solid #686565;
transition: transform .3s,opacity .3s;
}
</style>
{% endif %}
Thanks Dipen. It worked 🙂 Do you have a fix for the final point i mentioned?
Appreciate it.
2) how do i get rid of the click state for the menu items (currently when you click on the menu item, the line underneath goes wider and offset, i just want it to be the same as the active state in look and feel when you click)
This is an accepted solution.
Hello @annabelleg21,
Greetings!!
Add this CSS for 2nd point
Online Store->Theme->Edit code->Assets->base.css.liquid and find this line
.header__menu-item:active {border-bottom: none !important;}
Hi there, please assist, I've wrongly input some code. not sure where did i input and how to remove. Now its shows in footer like shown in the image. please guide how to remove. Thanks in adavnce.
Hi there, please assist, I've wrongly input some code. not sure where did i input and how to remove. Now its shows in footer like shown in the image. please guide how to remove. Thanks in adavnce.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025