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

[HangoverHelper]

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.

tryhangoverhelper.com

Thank you so much in advance!

[BSSCommerce-HDL]

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

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: 

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  😍

[HangoverHelper]

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

[BSSCommerce-HDL]

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

[BSSCommerce-HDL · 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: 

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 😍

[binal_identix]

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

[HangoverHelper]

Thank you!