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