Solved

Change Hover & Active/Selected State in the Navbar & Footer

HangoverHelper
Excursionist
42 0 5

Hi! I'm currently using the Dawn theme. Is it possible to change the hover and active/selected state of the navbar and footer to this color #F29D52 and remove the underline? Currently, it is set to white and underlined, but I can't seem to find how to edit this in the editor.

 

HangoverHelper_0-1716347742122.png

tryhangoverhelper.com

Thank you so much in advance!

Accepted Solution (1)
BSSCommerce-HDL
Shopify Expert
733 243 255

This is an accepted solution.

Hi @HangoverHelper

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.footer .list-menu__item.list-menu__item--link.list-menu__item--active {
  text-decoration: none !important;
  color: #F29D52 !important;
}
.footer-block__details-content .list-menu__item--link:hover {
  color: #F29D52 !important;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}

Here is result: 

BSSTechVenture_0-1716349118801.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Expert
733 243 255

Hi @HangoverHelper

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSTechVenture_1-1716348511052.png

 

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

BSSTechVenture_2-1716348519647.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

span.header__active-menu-item {
    color: #F29D52 !important;
    text-decoration: none !important;
}

.header__menu-item:hover span {
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}

.header__menu-item:hover {
  color: #F29D52 !important;
}

 

Here is result: 

BSSTechVenture_0-1716348463638.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you  😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
HangoverHelper
Excursionist
42 0 5

Hello! Thank you! It worked! Is it also possible to do this on the footer links?

HangoverHelper_0-1716348717082.png

 

BSSCommerce-HDL
Shopify Expert
733 243 255

@HangoverHelper We will check it and suggest you a solution if possible 😘

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-HDL
Shopify Expert
733 243 255

This is an accepted solution.

Hi @HangoverHelper

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

.footer .list-menu__item.list-menu__item--link.list-menu__item--active {
  text-decoration: none !important;
  color: #F29D52 !important;
}
.footer-block__details-content .list-menu__item--link:hover {
  color: #F29D52 !important;
  text-decoration: none !important;
  text-underline-offset: 0 !important;
}

Here is result: 

BSSTechVenture_0-1716349118801.png

Hope this can help you, 
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

iCart_App
Shopify Partner
558 58 107

Hello @HangoverHelper 

You can try this code: it might be helpful to you- 

Navigate to the Online Store-> Theme-> Edit code-> Assets> base.css -> add below the code(bottom).

 

 

.header__menu-item:hover {
    color: #F29D52 !important;
}
.header__menu-item:hover span {
    text-decoration: none !important;
    text-underline-offset: 0 !important;
}
.header__active-menu-item:hover {
    color: #F29D52 !important;
    text-decoration: none !important;
}
.footer-block__details-content .list-menu__item--link:hover, .copyright__content a:hover {
   color: #F29D52 !important;
   text-decoration: none !important;
   text-underline-offset: 0 !important;
}
.footer .list-menu__item.list-menu__item--link.list-menu__item--active {
  text-decoration: none !important;
  color: #F29D52 !important;
}

 

 

 

iCart Cart Drawer Cart Upsell App


- If you find the solution helpful, please accept and like it
- To learn more visit www.identixweb.com
HangoverHelper
Excursionist
42 0 5

Thank you!