hover with underline and different color

On the menu dropdown I want "Gullbekken Records" to get the color #F15824 and underline, how do I do this?

Thanks!

Hi,

This is possible with some simple code.

If you share link to your site, we can help easier

www.gullbekken.com

On 12/18/2022 at 10:52 PM, gullbekken said:

www.gullbekken.com

Add to Design > Custom CSS

div.header-menu-nav-item--active .header-menu-nav-item-content {
    background-image: none !important;
    border-bottom: 1px solid #F15824;
}

That didn't seem to work, that made "Gullbekken Studio" get a red underline, and still no underline and color for "Gullbekken Records".

So I want "Gullbekken Studio" to stay as it is, but "Gullbekken Records" also to get a underline and change color on hover...?

If you want  effect on hover, use this code

div.header-menu-nav-item [href="/gullbekken-records"]:hover {
    background-image: none !important;
    border-bottom: 1px solid #F15824;
    display: inline-block;
    color: red !important;
}

replace red, #f15824 with color what you want

Close! Still I need "Gullbekken Records" to have a black underline when not hovering, just like "Gullbekken Studio". And when I am hovering "Gullbekken Records" everything (G Studio and G Records) moves 1 or 2 pixels up?

On 1/15/2023 at 7:24 PM, gullbekken said:

Close! Still I need "Gullbekken Records" to have a black underline when not hovering, just like "Gullbekken Studio". And when I am hovering "Gullbekken Records" everything (G Studio and G Records) moves 1 or 2 pixels up?

To confirm your request, you want

• (Initial) Underline Gullbekken Records, same as Gullbekken Studio

1-2 pix up, change the code

div.header-menu-nav-item [href="/gullbekken-records"]:hover {
    background-image: none !important;
    border-bottom: 1px solid #F15824;
    display: inline-block;
    color: red !important;
}

to this

div.header-menu-nav-item [href="/gullbekken-records"] {
    border-bottom: 1px solid transparent;
  display: inline-block;
}
div.header-menu-nav-item [href="/gullbekken-records"]:hover {
    background-image: none !important;
    border-bottom: 1px solid #F15824;
    color: red !important;
}

Great! Only thing missing now is that "Gullbekken Records" also has a black underline when not hovering. Just like "Gullbekken Studio" above (see attachment).

On 1/19/2023 at 11:28 PM, gullbekken said:

Great! Only thing missing now is that "Gullbekken Records" also has a black underline when not hovering. Just like "Gullbekken Studio" above (see attachment).

You mean you need both has underline before hover?

Exactly : )

On 1/27/2023 at 12:31 AM, gullbekken said:

Exactly : )

Don't remove any code in your current code. Add this to Design > Custom CSS

.header-menu-nav-item-content {
    background-image: linear-gradient(currentColor,currentColor);
    background-repeat: repeat-x;
    background-size: 1px 1px;
    background-position: 0 100%;
}

that worked, thank you!