How to add an image to a WordPress menu

How to add an image to a WordPress menu

[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” overlay_color=”” overlay_opacity=”0.5″ video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”20px” padding_right=”” padding_bottom=”20px” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding=”” dimension_margin=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_title margin_top=”” margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

Problem: Client wants an image in the main menu for store link

[/fusion_title][fusion_text]

I was asked recently how to add an image to a WordPress menu by a client for their website. You can see the example they provided to the right. I am using a template that has Visual Composer as the editor. The template does not have a lot of hooks to allow extra menus. There was no top menu so I needed to either add an image ‘tag’ down from the top, add an image to the header area (next to the menu) or add an image to the menu item itself.

[/fusion_text][fusion_title margin_top=”” margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

Solution: Use Nav Menu Images

[/fusion_title][fusion_text]

Nav Menu Images plugin for WordPress is a cool tool that does just what it says. It will add an image where your menu item was. I haven’t tried it on any drop-down items, but it works for my purposes.

There are menu managers out there like Mega Menu. However, I wanted something with less bloat and something that just worked out of the box.

If you want to know how to add an image to a WordPress menu, look no further than Nav Menu Images plugin. Easy to install and easy to use.

[/fusion_text][fusion_title margin_top=”” margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

So, now you know how to add an image to your Wordpress menu!

[/fusion_title][fusion_text]

I would still like to know how to add the ‘tag’ style image that the client originally proposed. I haven’t found a plugin that can do that as of yet. Let me know in the comments if you have a solution.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_2″ layout=”1_2″ spacing=”” center_content=”no” hover_type=”none” link=”” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_position=”left top” background_repeat=”no-repeat” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” padding=”” dimension_margin=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_title margin_top=”” margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

Example:

[/fusion_title][fusion_imageframe image_id=”1416″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”yes” gallery_id=”” lightbox_image=”http://perrylawrence.com/wp-content/uploads/2017/02/shop-image.jpg” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://perrylawrence.com/wp-content/uploads/2017/02/shop-image.jpg[/fusion_imageframe][fusion_title margin_top=”20″ margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

Nav Menu Images Screenshot:

[/fusion_title][fusion_imageframe image_id=”1417″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”yes” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://perrylawrence.com/wp-content/uploads/2017/02/screenshot-3.png[/fusion_imageframe][fusion_title margin_top=”20″ margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” size=”2″ content_align=”left” style_type=”default” sep_color=””]

Final Results:

[/fusion_title][fusion_imageframe image_id=”1418″ style_type=”none” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”yes” gallery_id=”” lightbox_image=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]http://perrylawrence.com/wp-content/uploads/2017/02/Screen-Shot-2017-02-02-at-1.09.12-PM.png[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

Perry

Some people know me as Mr Video and some know me as Perry Lawrence. I define 'success' as being content in all situations. Read a few posts here to get some insight into what's going on in my world.

Leave a Reply

Close Menu