Header Nav Bar Hover Colour

Hi,

this is a Custom CSS for the navigation link hover effect:

.wp-block-navigation__container a:hover {
    color: var(--wp--preset--color--foreground);
    opacity: .8;
}

Hope this helps,
Ana

Hi @anariel-design,

thankyou for your swift response. The hover also has two right angled half boxes top right and bottom left, this needs to change to the hover colour as well.

Regards

Bob

Hi Bob,

ah yes, sorry about this.
Here it is:

.wp-block-navigation__container>.wp-block-navigation-item a::before {
    border-top: 2px solid var(--wp--preset--color--foreground);
    border-right: 2px solid var(--wp--preset--color--foreground);
}
.wp-block-navigation__container>.wp-block-navigation-item a::after {
    border-top: 2px solid var(--wp--preset--color--foreground);
    border-right: 2px solid var(--wp--preset--color--foreground);
}

and you can change this: var(–wp–preset–color–foreground) with your color, for example #efefef

Hope this helps.

All the best,
Ana

Thanks for that Ana,

I will try it tomorrow and let you know how I got on.

Regards

Bob

Oh yes, please let me know ??

Hi Ana,

I have tried your css, however to make it work I had to modify it;

.wp-block-navigation-item a::before {
border-top: 2px solid #ff9226 !important;
border-right: 2px solid #ff9226 !important;
}
.wp-block-navigation-item a::after {
border-bottom: 2px solid #ff9226 !important;
border-left: 2px solid #ff9226 !important;
}

Note the border bottom and left on the :: after css. It now works perfectly.

On the mobile menu the padding between the label and the borders is non existant, could you please help with this css as well.

Regards

Bob

Hi Bob,

you can use this:

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
    padding: 0 10px;
}

and I’ll add this to the next theme update soon ??

Thanks once again Ana,

I will mark this as resolved.

Regards

Bpb

Hi Bob,

you are welcome. If you need any help with the theme please let me know :). And if you will have some time to rate the theme I would appreciate it a lot :).

All the best,
Ana

Hi Ana,

all done

Regards

Bob

Thank you soo much Bob, appreciate it :). Oh, I just uploaded a theme update with the menu hover fix on the mobile.

All the best,
Ana

The update works well.

Have you thought about adding copyright and date to the footer.

Regards

Bob

Hi Bob,

oh, you can add it on your own as a block or you can write me what you would like to have and I can make a block with, that you can just copy-paste to your footer. I’ll also add this to the list for the next theme update.

Best,
Ana

Thanks Ana,

I will wait for the theme update as I have already added the copyright to the footer.

Regards

Bob

Oki, I added it to my list and will make an update in the next few days.

Best,
Ana