Custom navbar underline follow-up take 2

[KimAnn]

Hello- this is a continuation of this thread:

Custom navbar underline follow up

On mobile I am getting multiple squares around anything i hover around in the nav menu…see attached image:

Will attach login for the site in a secure note

[rad]

Hi Kim,

Thanks for reaching out.

Border image styling behaves differently on safari, and it repeats the border image since there is no option of no-repeat or repeat-x. Instead, please use background image, example

li.menu-item > a:hover > span, li.current-menu-item > a > span {
    padding-bottom: 8px;
    background-image: url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png);
    background-repeat: repeat-x;
    background-position: bottom center;
}

Hope this helps.

[KimAnn]

I’m not sure what you mean. I tried this and it did nothing:

li.menu-item > a:hover > span, li.current-menu-item > a > span {
border-bottom: 3px solid transparent;
padding-bottom: 5px;
border-image: url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png) 30%;
background-repeat: repeat-x;
background-position: bottom center;
}

[nabeel]

Hi Kim,

Please find the following code you’ve added:

li.menu-item > a:hover > span, li.current-menu-item > a > span {
    border-bottom: 3px solid transparent;
    padding-bottom: 5px;
    border-image: url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png) 30%;
    background-repeat: repeat-x;
    background-position: bottom center;
}

And replace it with:

li.menu-item > a:hover > span, li.current-menu-item > a > span {
    padding-bottom: 8px;
    background-image: url(https://alisonljames.com/wp-content/uploads/2019/06/Merlin-page-indicator.png);
    background-repeat: repeat-x;
    background-position: bottom center;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[KimAnn]

Perfect thank you!

[Prasant]

You are most welcome.