Do you wish to add icons in your WordPress navigation menu? Not too long ago, considered one of our customers requested for a straightforward manner so as to add photographs as icons in navigation menus. On this article, we are going to present you add picture icons in your WordPress navigation menus with out modifying any code.
Video Tutorial
If you happen to don’t just like the video or want extra directions, then proceed studying.
Very first thing it is advisable to do is set up and activate the Menu Image plugin. Upon activation, go to Look » Menus. There you will notice an choice so as to add photographs with every merchandise in your present menu.
Subsequent, add the picture you wish to show subsequent to the navigation menu by clicking on the ‘Set Picture’ button.
The plugin robotically creates three new picture sizes of 24 x 24, 36 x 36, and 48 x 48 pixels. You'll be able to select them from picture measurement drop down menu. You may also select the place you need menu title to seem. You'll be able to show it earlier than or after the picture. You may also cover the title and show solely the picture.
Including Your Personal Picture Dimension
If you wish to add your personal customized picture measurement for the pictures you add to the menu, then you are able to do that by including this code in your theme’s functions.php file or site-specific plugin.
add_filter( 'menu_image_default_sizes', perform($sizes));
Including Photographs To Navigation Menus Manually with CSS
This methodology is for extra skilled customers who know their manner round CSS. First it is advisable to add your photographs to WordPress by visiting Media » Add New. After importing every picture, copy their URLs and paste them in a textual content editor like Notepad.
Now head over to Look » Menus and click on on the Display screen Choices button on the prime proper nook of the display screen. On the display screen choices menu, verify the field subsequent to CSS lessons.
Subsequent scrolldown to click on on any merchandise in your present menu, and you'll discover a CSS class area. All it is advisable to do is add a CSS class to your menu merchandise.
After that it is advisable to add this CSS in your theme or little one theme’s stylesheet.
.homepage
Don’t neglect to alter .homepage to no matter CSS class you entered, and alter the URL of the background picture from the one you saved earlier in a textual content file.
Relying in your theme, it's possible you'll must tweak the CSS just a little bit. As soon as you might be happy with the end result, repeat the method for all menu gadgets.
That’s all for now. We hope this text helped you learn to add picture icons with navigation menus in WordPress. You may additionally wish to try our information on style WordPress navigation menus.
If you happen to preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may also discover us on Twitter and Google+.
