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.
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.
Below is what the WordPress image nav menu will look like on the smallest mobile phone screen.
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”.
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).
After creating a new menu tick the Theme Location : “Photo Navigation” box and “Save 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.
After Saving the menu it will work and will look like the image below:
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.
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).
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:
For Stallion Responsive child theme users (highly recommend using the free WP child theme) they are located at:
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.
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 :-)