The Modern Menu is an enhancement to the Modern Mobile Menu that incorporates inline display on the desktop version (screen/browsers over 1200px). You must complete the Modern Mobile Menu setup for this to function correctly.
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.
Jump to:
Inline Modern Menu
We recommend using the Inline Modern Menu.
The Inline Modern Menu improves on the original theme menu by:
- showcasing your 5 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
- social icons for readers to follow you on other platforms
Hamburger Modern Menu
The hamburger menu is a design scheme for mobile devices, because displaying an entire menu on a mobile screen isn't possible.
However, we had enough requests to have this put back that we've made it an option.
Theme menu
While we don't recommend using the theme menu anymore, the Modern Menu can be disabled to fall back to the traditional theme menu.
Note: the theme menu style varies depending on which theme you have set up.
User experience
The first 5 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.
Subscribe button
The subscribe button is removed on the desktop inline menu, in favor of having additional menu items.
If you'd like, you can add a Subscribe item to the feast-modern-mobile-menu menu. This also provides translation support.
Purpose
It's important to start with what the purpose of a website menu is.
The menu is the broadest level of navigation on your site, focused on linking to "index" pages that allow users to navigate deeper into the site, or focus on key calls-to-action such as subscribing to your newsletter, or contacting you.
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.
No, the primary navigation menu should be focused, and concise. Drop down menus and sub-menus are the same thing.
You'll need to follow the instructions for setting up the Modern Mobile Menu Social Icons.
If you've set your social icons larger than 50px, there's not enough space inline so they stack. Reduce the icons to 50px in the Modern Mobile Menu Social Icons widget area.
Either the theme you're using (non-Feast) loads their menu in a different way, or you have a "secondary navigation" menu set. Simply unset the "Secondary Navigation" option in the menus screen.
Customizing
The following CSS snippets can be added to your "Additional CSS" screen.
Capitalize
.desktop-inline-modern-menu { text-transform: uppercase; }Bold
.desktop-inline-modern-menu a { font-weight: 700; }Floating effect
.feastmobilenavbar { box-shadow: 0 3px 2px #999999; }Font size
Note: going to small can cause accessibility issues. We do not recommend this.
.feastmobilenavbar a { font-size: 16px; }Background
.feastmobilenavbar { background: #EEEEEE !important; }Note: Requires uploading new logo to match.
Hamburger + Social Icons
.feastmenutoggle svg, .feastsearchtoggle svg {
color: #F00 !important;
background: #00F !important;
border: 2px solid #F00 !important;
border-radius: 8px;
}Note: The social icons are controlled by the Simple Social Icons widget
Icons and desktop menu text (+mobile subscribe)
.feastmobilenavbar a, .feastsearchtoggle svg, .feastsubscribebutton svg, .feastmenutoggle svg { color: #a02003!important; }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?
Skylar says
The social icons have been integrated into the 6.2.0 release!
Bea says
Thank you so much!
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.
Skylar says
Go ahead and submit a support ticket and we'll look into the issue.
Alex says
Could you comment on the easiest way to add a bit more space between the modern menu on desktop and the site content? It feels a little crammed when I enable on my site. :/
Skylar says
If you haven't made any modifications, this shouldn't be necessary. Please submit a support ticket to have us take a look at the site.
Sally says
Hi Team, this menu only shows three social media icons (even though there are more in the settings). How can I show more than three (all) SM icons in the Modern Menu for Desktop?
Skylar says
Due to space constraints with other items in the menu, it's only possible to display 3.