Update 2.3.5 Navigation Caret

When the dropdown menu is needed, the caret is located outside of the anchor tag. If I add a background-color on hover, the background-color does not extend to the caret. Would it be possible to move the closing anchor tag after the caret?

Before:

<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41 dropdown">
    <a href="http://website.com/service-sectors/">Service Sectors</a> <span class="caret sparkling-dropdown"></span>

After:

<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-41 dropdown">
    <a href="http://website.com/service-sectors/">Service Sectors <span class="caret sparkling-dropdown"></span></a> 

Hi @packerlandwebsites,

I hope you are well today and thank you for your question.

Instead of moving caret which is a bit complex, we can achieve this developing custom CSS code.

Could you please share me your site URL where it’s displaying and tell me what color you want to apply on caret on hover so that i can help you to achieve it?

Best Regards,
Movin

Hi @Movin,

The website is: http://bayenvironmental.com/ and I’ve attached an image of what I’d like it to look like on hover. I couldn’t seem to get css to cooperate. Hopefully, you have an idea…

I thought I could add a folder to my child theme, named inc, and add a modified class-wp-bootstrap-navwalker.php but that didn’t seem to work.

Hi @movin,
I marked my last reply as private, and I was just checking to see if you received it.
Thanks!

Yes i got your site URL.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

.navbar-default .navbar-nav > li:hover {
    background-color: #e7e7e7;
}

#page .navbar-nav > li > .caret {
    margin-left: -20px;
    position: relative;
}

Hi @Movin,
This almost worked, just had to make a few tweaks. Here is what I ended up with:
.navbar-default .navbar-nav > li:hover {
background-color: #e7e7e7;
}
.navbar-nav > li > .caret {
margin-left: -20px;
position: absolute;
top: 50%;
}

Thanks for all your help! :slight_smile:

You are most welcome here :slight_smile: