[Jared WParticipant]

I am wondering if there is a way that I can remove the navigation arrows or chevrons that appear next to a navigation menu item.

On ForestLakeChevrolet.com you can see an example of these chevrons to the right of the “Financing” and “New Cars” menu links.

Thank you,
Jared Wilcox

[Paul RModerator]

Hi Jared,

To remove it, you can add this under Custom > CSS in the Customizer.

body .x-navbar .x-nav li>a:after {
    display:none;
}

Thanks

[Jared WParticipant]

I implemented this a few weeks ago and it worked great. Then I updated X to the latest version today and now the chevrons pointing down are all there next to the menu items again.

What do I need to do now to get rid of them. See ForestLakeChevrolet.com.

Thank you,
Jared Wilcox

[Paul RModerator]

Hi Jared,

Sorry to hear that.

You can replace the code with this.

body .x-navbar .x-nav li>a>span:after {
    display:none;
}

Thanks

[Jared WParticipant]

Upon looking at it further, I realized that the update to X made some significant improvements to how the menu behaves on a mobile device. I would like to still feature an arrow or chevron, but I would like it if there were a way for me to change it to a single arrow or chevron pointing down, rather than a double arrow or chevron.

Is there a way that I can change the double arrow to a single arrow in the dropdown menus?

Thank you,
Jared Wilcox

[RadModerator]

Hi Jared,

Add this css at your child theme’s style.css for permanent styling.

.mobile .menu-item-has-children .x-icon-angle-double-down:before {
content: "\f107";
}

if you still want to save this at your customizer’s custom css, then should be like this.

.mobile .menu-item-has-children .x-icon-angle-double-down:before {
content: "\\f107";
}

Hope this helps.

[Jared WParticipant]

That worked great for the mobile menu. I would like to feature the single down arrow, rather than the double arrows on large screens as well.

Is there a way that I can change the double arrows in the menus to single arrows on all devices?

Thank you,
Jared Wilcox

[ChristianModerator]

Hey Jared,

Please add the code below in your Appearance > Customize > Custom > CSS.

.x-navbar .desktop .x-nav li>a>span:after {
content: "\\f107";
}

Hope that helps. 🙂

[Author]

Posts