Tagged: custom icon, icon, main-menu
How can I add to the main menu an icon only that is a link for an external page?
Hey adanari,
You can add a CSS class to all external links in the main menu, please check this article: https://www.lockedownseo.com/add-css-classes-to-menu-items-in-wordpress/
Can you tell us which icon you would like to use? so we can try to give the CSS code that should help.
Best regards,
Nikko
Hi adanari,
Please add this code in functions.php (I would suggest using a child theme):
function main_menu_links () {
?>
<script>
(function ($) {
$(document).ready (function () {
var url = new RegExp(location.host);
$('#avia-menu .menu-item > a').each(function () {
if( ! url.test($(this).attr('href')) ) {
$(this).parent().addClass('av-external-link');
}
});
});
}) (jQuery);
</script>
<?php
}
add_action ('wp_footer', 'main_menu_links');
Then add this CSS code in Enfold > General Styling > Quick CSS:
#top #header .av-external-link {
padding-left: 12px;
}
#top #header .av-external-link:before {
content: '\e859';
font-family: 'entypo-fontello';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
Hope it helps.
Best regards,
Nikko
Hey Nikko.
it works! Thx a lot.
Greetting from Mexico.
Hi adanari,
You’re welcome :)
We’re glad that we could help.
Thanks for using Enfold and have a great day!
Best regards,
Nikko