The Stallion Responsive Theme and Stallion WordPress SEO Theme include a built in WordPress nav menu with images.

The Stallion WordPress photo navigation menu is built outside the default WordPress nav menu system (the navigation menu that tends to be below the header), so you can have both running at the same time.

The Stallion photo navigation menu comprises of 5 image links, the 5 menu items in Stallion Responsive can link to anything, static Pages, blog posts, categories, custom links…

WordPress Menu Images

Below is a screenshot of the Good Karma Blog with a Stallion photo navigation menu.

WordPress Menu Images

The image nav menu uses ‘concertina fold’ javascript code to reveal/hide the nav images, as you hoverover the menu links the images move or concertina fold to hide/reveal the images. Click the image above and you’ll see three screenshots in one, the top version shows the image menu as above, the second line as above, but with the mouse hovering over the first image (the 4 images have shifted to the right) and the third screenshot showing the mouse hovered over the center image (the three images to the left have moved left and the image to the right has moved to the right).

Mobile Responsive WordPress Nav Menu with Images

The photo nav menu is Stallion Responsive is fully mobile responsive, as the screen width decreases so does the size of the menu images.

Below are a couple more screenshots showing two more screen sizes, as you can see the images become narrower as the screen width decreases.

Responsive WP Nav Menu

Below is what the WordPress image nav menu will look like on the smallest mobile phone screen.

Responsive Nav Menu

Photo Nav Menu Options

There are several steps to using a photo nav menu in Stallion. First step is turn the photo nav menu feature on under “Stallion Theme” >> “Layout Options” : “Photo Navigation Menu ON”.

WP Photo Navigation Menu

When Photo Navigation Menu is set to ON you’ll find a blank space below your header, the following steps choose the WordPress posts etc… to link to from the blank menu.

Create WP Nav Menu

Go to “Appearance” >> “Menus” and “Create a new menu” which we will call “navphoto” (call it anything unique).

WP Create a New Menu

After creating a new menu tick the Theme Location : “Photo Navigation” box and “Save Menu”.

WP Image Menu

Add 5 links to this menu, for simplicity I’m adding 5 WordPress Static Pages. You’ll see on the “Appearance” >> “Menus” admin page you can add Pages, Links (custom links to any URL) and Categories. To gain access to WordPress Posts and Tags (so these can be added to WordPress nav menus) click the “Screen Options” button on the top right of the screen and tick the Posts and Tags boxes.

WP Image Nav Menu

After Saving the menu it will work and will look like the image below:

WordPress Image Menu

WordPress Image Navigation Menu

You now have two ways to change the default Hot Post images (there’s 5 of them).

If your menu is created with only WordPress Static Pages and WordPress Posts you can set all 5 images under WordPress.

Edit the 5 posts/pages you’ve added to the menu and you’ll find a WordPress meta box (form) called “Stallion Photo Navigation Menu” for uploading images for the image nav menu.

Upload WP Image

The images should be 300px wide by 200px high, if you use larger/smaller images Stallion will resize them, but they won’t look as good. Beyond that it’s up to you what images you use. As you upload the images the images will be associated with the menu, below is a screenshot of my test site after adding two of the 5 images (couple of World of Warcraft images).

WordPress Navigation Menu Images

After adding an image for all 5 WordPress Posts/Pages your image menu is complete.

If you want to add custom links (to other sites for example) or Categories, Tags, Home Page…. there’s no place to add an image using WordPress and the solution is to manually FTP (using Filezilla for example: free FTP program) to your sites server direct.

If you are running Stallion Responsive without a child theme the 5 Hot Post images are located at:

/wp-content/themes/stallion-responsive/imagemenu/images/

For Stallion Responsive child theme users (highly recommend using the free WP child theme) they are located at:

/wp-content/themes/stallion-responsive-child/imagemenu/images/

From left to right the images are:

1st image: 0.jpg
2nd image: 1.jpg
3rd image: 2.jpg
4th image: 3.jpg
5th image: 4.jpg

Create new images (300px by 200px) jpg images for the menu links that are NOT WordPress Posts/Pages and upload using FTP. Not sure how to make an image with text like you see in the Hot Post image, Download an Example Paintshop Pro WP Photo Menu Template (PSD) File as a starting point.

Filezilla FTP Upload

If for example the first menu link is to a Category it needs a new 0.jpg image uploaded via FTP. If menu links 2 and 3 are WordPress Posts you can either create new images 1.jpg and 2.jpg or use the edit Post page to add an image using the “Stallion Photo Navigation Menu” meta box (as described earlier). If menu links 4 and 5 are custom links they’ll need new images 3.jpg and 4.jpg uploaded using FTP.

So you have the choice of uploading them all using FTP or only the images NOT for use with a WordPress Post/Page.

Sounds a lot more complicated than it is, honest :-)

David Law

David Law > AKA SEO Dave
*
: Experienced WordPress SEO Expert, Internet Marketer, Developer of the Best SEO Package Stallion Responsive WP SEO Theme (tested to WordPress 4.8 June 2017) and Nice Guy :-)

Website - SEO Tutorial for WordPress