The Modern Menu is an enhancement to the Modern Mobile Menu that incorporates inline display on the desktop version.
Note: on most food blogs, 80% of all pageviews happen on mobile, and so that menu needs to be designed for mobile, first and foremost.
The Modern Menu improves on the original theme menu by:
- showcasing your 4 most important links for site structure and a call-to-action
- a "sticky" menu that lets your readers go back home, and access search, and all times
- a minimal logo, ensuring that the on page content that your readers are on your site for is give the most screen real estate
User experience
The first 4 links in the Modern Mobile Menu you created are what gets automatically embedded, and these should be the most important links you want to promote.
This requires conscious effort and is actually very important for the user experience - you want to guide your readers through your site with a good site structure, not simply overwhelm them with options.
Troubleshooting
You may not have created the feast-modern-mobile-menu as with the correct name, or you may have older unused menus that need to be deleted.
This is a caching issue, because it hasn't been regenerated to include the styling necessary. Please clear all hosting, WP Rocket and CDN caches.
If your menu items title is too long, it will wrap to the next line. To resolve this, shorten the menu title. For example, "Recipe Index" should just be "Recipes". "Work with me" should be "Collaborate".
We don't recommend drop down menus because of questionable mobile and accessibility support. Instead, provide users with a good site structure, using multiple Modern Recipe Indexes if necessary.
Customizing
Capitalize:
.desktop-modern-menu { text-transform: uppercase; }Inline Modern Mobile Menu
Mobile devices don't have the screen width necessary to accommodate an inline menu, so this is not available for mobile.
Bea says
I love this update as I've been trying to figure out how to do this for a while. (I love the modern mobile menu but felt that it's too simplistic for desktop.)
I know it's currently in Beta, but do you think it will be possible to add social icons in the future? Also I've found that there's space after the search icon (I guess everything is aligned to the left or middle?) Is there a way to change the alignment of the menu titles and search icon?
Rads says
I love this update. But while the formatting of the feast mobile menu appears good on the desktop, in mobile it took the post body format which was, the links changed color, and gets underlined which is how I had set up. So while I'm excited about this update, had to keep it turned off 🙁
And would also love the social icons additions in the future.