Hello
I am trying to replace the menu arrows when there are sub-menu items with a custom animated image. The easiest way would be to replace it, of course, but as I currently don’t have access to the functions.php or editor files (not even to create a child theme) I’ve resorted to plugins and custom css.
I’ve used the Menu Image plugin (https://html-and-cms.com/plugins/menu-image/) and am now trying to find the css which REMOVES the arrows. Among many others based on scouring the theme forum I’ve tried the following css code but it doesn’t work.
#header .top-header .header-navigation li.dropdown>a:focus .caret{border-top-color: transparent;
}
Could you please help me either remove the menu arrows (across the entire site, not just top level menu) or if there is an easier way to REPLACE the arrows with a custom animated gif (not needing to access editor or functions.php) then even better!
Thank you in advance!
I managed to remove the arrows with this code
#header .top-header .header-navigation ul li>a:after {
display:none;
}
Still trying to figure out the rest of the site, now.
Hello - any thoughts on how to replace the arrow images for all menus across the site or at least to remove them? I now also have access to Editor etc.
I tried to adjust the above working code for the top navigation menu for the footer widget menus but it doesn’t work. Would be great if I instead had a site wide code, thank you!
Hello there,
I hope you are doing well today.
You can use the following CSS code to replace the arrow by going to Appearance > Customize > Additional CSS and pasting it there. You would have to replace the content information with the image you would want to use.
#header .top-header .header-navigation ul li.menu-item-has-children a::after {
content: "\f107";
}
Best Regards,
Support
Hello
Thank you for your response. I’ve tried the code you suggested before, but I can’t figure out how to insert not content but a link to a media file. I’ve tried the code below but that doesn’t change anything.
#header .top-header .header-navigation ul li.menu-item-has-children a::after {
content: "<img src="/Blue-Eco-circle-dot.png">";
Furthermore, this code only deals with the top navigation header, I would like to remove/ replace the menu arrows on the entire website (including in widgets in the footer, for example).
Thank you in advance!
Hi there,
I hope you are having an awesome day and thanks for contacting us regarding your query.
In order to provide the best CSS to remove these arrows, I’ll need to have some access to your site. Kindly provide me with a link to a page with this so that I may be able to write up some CSS that should work for your setup.
Looking forward to your reply 
Cheers!
Hello
The website is ecocommunities.co.uk
Thank you!
Hello there,
Thanks for that information.
You can use the followin CSS code to remove the arrows:
/*Arrow removal*/
.widget:not(.widget_rss):not(.widget_recent_comments):not(.widget_recent_entries) ul li:before {
display: none;
}
Best Regards,
Support
Thank you for the code. It worked… sort of, but not quite. Because it only does not display instead of remove/ replace, the spacing is odd under the title when I add the image to the menu items. I’ve attached a screenshot.
Is there a code which removes that space entirely instead, or allows me to replace the arrow image with my own image?
Thank you in advance!
Hi there,
Thanks for keeping in touch with us.
I’m not entirely understanding your query. Are you trying to align the title with the images? If that’s the case, Kindly add and save the following code to Appearance > Customize > Additional CSS:
#footer .widget .widget-title h5 {
margin-left: 20px!Important;
}
I hope this helps
Best Regards,
Support
Hello
Thank you for your response and apologies for not being clearer with my request, but you understood correctly what it was I needed. It works well! I added top margin as well as there was no space in between the widgets in tablet and mobile mode.
Speaking of which, the “team” section of the front page is not responsive in the mobile format (images attached). Please kindly provide the solution to align the elements and make sure the images stay in a consistent size in mobile view.
Or is there a way to add more than one front page full width section? This would be the best solution for me. I can also create a new thread for this question but am adding it here because it is directly relevant.
Thank you in advance!
Hello
Have you had a look at how to make the team section responsive and align the elements for the phone view yet?
Thank you!