Solved

How to change the underline on hover and active main navigation items - dawn theme

annabelleg21
Excursionist
25 2 5

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 

 

https://bybillie.com.au/collections/eofy-1/products/textured-cotton-onesie-blue-bonjour-bebe?variant...

 

my store is 

https://boogie-beans.myshopify.com/

password is yuteld

 

pls advise how i can add code to do this 🙂 

Accepted Solutions (7)

oscprofessional
Shopify Partner
15897 2378 3083

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

DipenPanchal
Shopify Partner
252 59 80

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}

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

annabelleg21
Excursionist
25 2 5

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

View solution in original post

DipenPanchal
Shopify Partner
252 59 80

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

annabelleg21
Excursionist
25 2 5

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

 

View solution in original post

DipenPanchal
Shopify Partner
252 59 80

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


 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

DipenPanchal
Shopify Partner
252 59 80

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

 

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge

View solution in original post

Replies 12 (12)

oscprofessional
Shopify Partner
15897 2378 3083

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

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
ccm999
Tourist
11 0 0

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!

DipenPanchal
Shopify Partner
252 59 80

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}

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
annabelleg21
Excursionist
25 2 5

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

DipenPanchal
Shopify Partner
252 59 80

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

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
annabelleg21
Excursionist
25 2 5

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

 

DipenPanchal
Shopify Partner
252 59 80

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


 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
annabelleg21
Excursionist
25 2 5

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) 

DipenPanchal
Shopify Partner
252 59 80

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

 

 

 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution

Shopify Partner | Skype : dipen.setubridge
diya01
Tourist
13 0 0

 

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.

diya01_2-1714580128388.png

 

diya01
Tourist
13 0 0

diya01_1-1714580074507.png

 

diya01
Tourist
13 0 0

diya01_0-1714580056916.png

 

 

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.