• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Feast Design Co.

WordPress Themes for Food & Lifestyle Bloggers

  • Themes
  • Feast Plugin
  • Blog
  • Support
  • Tutorials
  • Nav Social Menu

    • Email
    • Facebook
    • Instagram
    • Twitter
menu icon
go to homepage
  • Feast Plugin
  • Support
  • Tutorials
  • Account
    • Facebook
    • Instagram
    • Twitter
  • search icon
    Homepage link
    • Feast Plugin
    • Support
    • Tutorials
    • Account
    • Facebook
    • Instagram
    • Twitter
  • ×

    Home » SEO

    Modern Mobile Menu

    Published: Sep 19, 2019 · Modified: Oct 7, 2022 by Skylar · 33 Comments

    This is a feature of the Feast Plugin

    The Modern Mobile Menu replaces the theme header and menu with a mobile and accessibility-optimized layout. As of 2021, with pagespeed, SEO and accessibility being major concerns, the Modern Mobile Menu is designed to be:

    • improves user experience by increasing above-the-fold content
    • improves user experience with a subscribe button
    • improves core web vitals by removing CLS issues
    • improves pagespeed by removing render-blocking javascript
    • improves SEO by supporting good site structure by making use of index pages for navigation

    The formatting and guidelines below have also been applied to the Inline Modern Menu for Desktop.

    Jump to:
    • Setup
    • Works on all themes
    • Logo
    • Menu
    • Social icons
    • Javascript
    • Pagespeed
    • CLS
    • Only on scroll-up
    • Subscribe button
    • Shortcomings
    • Dual or secondary navigation menus
    • Drop down menus
    • Accessibility
    • Disable Sticky
    • Styling
    • Troubleshooting
    Old theme nav bar + logo
    Modern Mobile Menu

    The navigation bar for the modern mobile menu drastically improves above-the-fold content being displayed. This is a more user-friendly experience, providing the reader with content they came to see instead of a logo that provides no value.

    We've also added the magnifying-glass search icon as a visual indicator that the site has search capabilities. Spoiler alert: it opens the same menu as the menu icon, which has the search bar.

    Old theme mobile menu
    Modern mobile menu

    A not-uncommon piece of feedback that we got was that the theme's mobile menu sometimes didn't behave properly - the hamburger menu (the 3 horizontal lines) and the "x" were difficult to click. We've corrected this by beefing it up and getting rid of the javascript used to animate it.

    Setup

    Setting up the Modern Mobile Menu requires:

    1. Enable the menu with the checkbox
    2. Upload and set mobile-only logo at 200x70 px
    3. Upload and set a mobile-only retina logo at 400x140 px
      • note: both of these logos are required
    4. Create a new menu named feast-modern-mobile-menu
    5. Add the Simple Social Icons widget to the new Modern Mobile Menu widget area

    #4 - create a new menu (guidelines for content below) named feast-modern-mobile-menu in Admin > Appearances > Menus:

    #5 - add the Simple Social Icons widget (guidelines below) to the new Modern Mobile Menu Search Icons widget area in Admin > Appearances > Widgets:

    Works on all themes

    This works on all 5 themes:

    • Foodie Pro
    • Brunch Pro
    • Cook'd Pro
    • Seasoned Pro
    • Cravings Pro

    One of the reasons the Feast Plugin's Sticky Mobile Menu never worked on Seasoned Pro + Cravings Pro was because they were set up different. We knew we'd be moving to a more modern setup that entirely replaced them. This is it.

    Logo

    When someone lands on a specific recipe post on your website, they're there to see the recipe, not your header. That's why we've been advocating to shrink the logo for over a year now.

    With the modern mobile menu, you can set a new logo (200px wide by 70px tall) to be rendered in-line with the menu bar.

    feast settings for mobile logo

    Note: make sure you use the image URL and not the attachment URL (the slug). The file must be a .jpg or .png, not WebP or slug.

    Menu

    Historically, desktop-style dropdown menus have been popular, but these just don't translate well to mobile.

    While a drop-down is easy and quick to navigate up-and-down the sub-menu trees, this process is cumbersome and slow on mobile. Your mobile menu should be tight and focused for bother user experience and accessibility.

    Create a separate mobile menu named feast-modern-mobile-menu, that links out to your key navigation and call-to-action pages.

    • Do not use sub-menus
    • Do not link to your homepage (this is what the logo is for)
    • Be picky about what goes in here
    • Use concise anchor text (eg. "Recipe Index" should simply by "Recipes")

    A simple one level navigation menu without submenus can benefit accessibility best practices, user experience and SEO by presenting a flexible page structure conveying  information and relationships through deep links, text and content.

    Kim Krause Berg

    Click depth (for site structure) is handled by surfacing the top categories on the Modern Homepage, and linking to all your categories in the Modern Recipe Index.

    See this webinar on information architecture for publishers by Casey, Arsen and Andrew.

    Check out the Inline Modern Menu for desktop introduced in version 6.1.0.

    Social icons

    You'll have a new widget area to add the Simple Social Icons to. Once the Simple Social Icons widget is added to the Modern Mobile Menu Social Icons widget area.

    This was necessary to add social icons to Brunch Pro and Cook'd Pro, and prevents widgets from being moved around by theme updates.

    Note: Make sure your icons are set to 50px width, and open in a new window. A border radius of 50% of the icon size will result in round icons, rather than square.

    While Foodie Pro, Seasoned Pro and Cravings Pro all had an existing navigation menu social widget area, a plugin-specific widget area was needed to add future support for saving customizations during theme updates, and swapping between themes.

    Note: We've been told that the Easy Social Icons works in this section as well, but we're unable to offer support for it.

    Javascript

    The themes' old mobile menus use javascript to display the menu, and was written circa 2014 when this was a good practice.

    But now it's 2019, and javascript is overkill for what menus are designed to do.

    Relying on javascript also causes the menu to fail if (or more likely when) there's a javascript error or conflict, such as those that happen to do ads the billion other plugins out there. A menu is a critical website component and having it fail because of javascript is unacceptable.

    Unfortunately, there was nothing out there that accomplished what we wanted to do, without using javascript. We've been looking for a solution for over a year.

    So we had to redevelop a new way of doing things, combining some clever new CSS properties to create a CSS-only menu.

    We think this works even better than the original menu, but please let us know if you have any feedback.

    Pagespeed

    With the modern mobile menu being entirely CSS, we can now remove javascript entirely from the theme. This improves pagespeed by:

    • not requiring additional file downloads (fewer resource requests)
    • eliminating render-blocking javascript on sites without WP Rocket defer js (which all sites should have anyway)
    • not requiring the browser to process and render the javascript

    This won't prevent other plugins from loading and using javascript, but it keeps the theme pagespeed-friendly.

    CLS

    The Modern Mobile Menu has been designed to eliminate CLS issues. Make sure to enable the "Add missing image dimensions" setting in WP Rocket, per the SEO for food bloggers tutorial.

    Only on scroll-up

    We've been asked a few times to have the menu hidden on scroll-down, and only showing on scroll-up. We've looked into this and decided against it because:

    • it would require javascript (see above)
    • it typically triggers CLS events (see above)

    Subscribe button

    The subscribe button allows you to remove embedded newsletter forms, as well as javascript and pop ups associated with newsletters that can negatively impact SEO, pagespeed, CLS and accessibility.

    subscribe button as seen on food&wine website
    subscribe button as seen on the financialpost website
    join button as seen on eatingwell website
    subscribe button as seen on the pioneer woman website
    sign up button as seen on saveur website
    subscribe button as seen on finecooking website

    This is designed replace:

    • intrusive interstitials (eg. pop ups)
    • inline sign up forms using javascript from newsletter providers (eg. Mailchimp)
    • inline sign up forms using outdated widgets (eg. Genesis eNews)

    The reason we want to eliminate popups and inline sign up forms is because they typically cause either:

    • CLS issues due to missing dimensions
    • pagespeed issues due to javascript calculations
    • SEO issues due to the poor pagespeed and CLS above
    • accessibility issues due to improper use of headings
    • accessibility issues due to missing form labels
    • accessibility issues due to poor guidelines around color contrast

    Once enabled, simply create a new page with the slug "subscribe" and embed your newsletter form into that one page.

    Shortcomings

    There are some limitations to this.

    The first is flexibility. The modern mobile menu is not designed to be heavily customized, though you can alter the CSS by making customizations in your "Additional CSS" screen. Note that this menu is still very early and will change over time, so your customizations may need tweaking (or stop working) in future updates.

    Dual or secondary navigation menus

    We do not recommend or support dual navigation (or "secondary navigation") menus.

    These are not mobile first and they are not accessibility compliant.

    Any administrative pages belong in the footer.

    Drop down menus

    We don't recommend or support drop down menus because they're not mobile-first and have questionable accessibility compliance.

    Instead, link directly to navigation pages such as the recipe index or other resources, which drill further into your site.

    Please review the Food Blog Site Structure post.

    Accessibility

    The Modern Mobile Menu has been tested with keyboard navigation and behaves as expected.

    Disable Sticky

    The Modern Mobile Menu sticks to the top of the screen as the reader scrolls, so that it remains easily accessible. This is a good user experience.

    Some people have requested the ability to disable this, and while we don't recommend this, and won't build support into the plugin for it, this can be achieved by adding the following to the "Additional CSS" screen:

    .feastmobilenavbar { position: absolute !important; }

    Styling

    The Modern Menu can be styled to better match your brand, using the branding section of the Feast Plugin:

    You can customize the background color with:

    .feastmobilenavbar { 
    background: var(--feast-branding-secondary-background) !important; 
    border-bottom: 4px solid var(--feast-branding-primary) !important; 
    }

    The icons can be colored (version 5.5.0+) with:

    .feastmenutoggle svg, .feastsearchtoggle svg { 
    color: var(--feast-branding-primary) !important;
    background: var(--feast-branding-primary-background) !important; 
    border-radius: 8px;
    border: 2px solid var(--feast-branding-primary) !important;
    }

    The "subsribe" button can be styled (version 5.5.0+) with:

    .feastmenutoggle svg, .feastsearchtoggle svg { 
    color: #F00 !important; 
    background: #005; 
    border-radius: 8px; 
    border:2px solid #CCC; 
    }

    Remember to provide adequate contrast for accessibility.

    Troubleshooting

    In the Cook'd Pro theme, the recipe index filter breaks due to the removal of the theme's Javascript. Add this code to the code snippets plugin to re-enable it:

    https://gist.github.com/feastdesignco/54128474021374785d2a028c5f379be3

    Note that we're dropping support this recipe-index setup and filter in 2020, so we consider this a temporary fix. The current Cook'd Pro recipe index was not designed to be mobile-first, and doesn't comply with modern best practices.

    More

    • Skip lazy loading first post image
    • SEO
    • Internal links
    • Modern Sidebar

    Reader Interactions

    Comments

    1. Anna says

      September 23, 2019 at 7:52 pm

      This is a super helpful explanation of your features, better than your sales page for the Feast plug-in to be honest. I especially like the mobile vs. desktop menu. That feature alone might make it worthwhile for me to sign up for the subscription (which I have to triple think about because, you know, recurring payments)

      Reply
      • Skylar Bowker says

        September 24, 2019 at 4:36 pm

        This is good feedback 🙂 I've gone and updated the plugin page with a snippet of preview.

        Reply
        • Anna says

          October 04, 2019 at 6:17 pm

          Great. And thank you for your reply to my support ticket on the mobile retina logo causing my "2x" 404 errors. I didn't realize it was a must-have. I just assumed it would be a nice-to-have and could degrade nicely if I didn't explicitly specify it.

          Reply
          • Skylar Bowker says

            October 05, 2019 at 6:17 am

            We'll have it fallback to not attempting to display any image in the 3.2.0 release 🙂

            In general, we recommend using a logo there, because it reinforces your site's branding.

            Reply
            • Anna says

              October 17, 2019 at 12:40 pm

              Skylar, I put in my mobile menu logos, both the 200px wide and 400px wide as recommended. The logo shows up beautifully in the mobile menu. But it looks cut off in the "Nav" bar header by a couple of pixels from the top. You can see this if you go to garlicdelight.com on your mobile phone or minimize your desktop browser window. What should I do to fix it? Do you want me to open a support ticket?

              Reply
    2. Elizabeth Porter says

      September 24, 2019 at 8:09 pm

      How do you disable this menu from being sticky?

      Reply
      • Tania says

        September 23, 2021 at 4:12 pm

        Hi Skylar! I would love to have an option to disable sticky mobile menu, but have the menu reappear anytime user scrolls up. How can I achieve that?

        Reply
      • Tania Sheff says

        October 07, 2021 at 9:58 pm

        Hi Skylar! Also, when I pasted the code to customize my "subscribe" button, it actually was changing my "Navigation" and "Search" buttons.

        Reply
      • Skylar says

        September 29, 2022 at 5:09 am

        This would require javascript (which we avoid due to code conflicts/errors), and could result in CLS issues.

        Reply
    3. Tomasz Olszewski says

      September 25, 2019 at 8:30 am

      Very good move. Mobile UX is something which is very very necessary and installing additional plugins make no sense when Feast Plugin was released.
      I know that every release should be implemented step by step and search option is a visual indicator however I would suggest to make search a search and menu a menu to avoid confuse and not double functionality.
      Looking for new updates! Thanks.

      Reply
    4. Elizabeth says

      September 25, 2019 at 11:36 am

      Because it states next to sticky mobile menu “this can be disabled if using modern mobile menu”.

      I think it’s important that the option is available.

      Many bloggers run ads and mobile adhesion ads with the introduction of sticky video players along with a sticky menu leaves little screen space for readers to see the content.

      This is just a fact. Bloggers want to make money too and we also want to give our audience the best experience.

      I’m glad you explained that there is no option currently available because I have messing with my site for hours trying to figure out why I couldn’t disable it as it says you can do within the plugin.

      Thanks!

      Reply
      • Skylar Bowker says

        September 25, 2019 at 12:58 pm

        Thanks for explaining that Elizabeth - and I see where the confusion comes from.

        The "sticky mobile menu" was a feature of the OLD mobile menu, and is unrelated to the Modern Mobile Menu. It was added to make the old menu sticky, which was not how it was originally designed in the themes. See: https://feastdesignco.com/sticky-mobile-menu/

        I'll look into a way of disabling the Modern Mobile Menu from being sticky.

        Reply
    5. Frank @ inquiringchef.com says

      September 28, 2019 at 1:54 pm

      Just implemented this. It looks great and it was so easy to set up. Thanks for your continued work on these features!

      Reply
    6. Deborah says

      September 28, 2019 at 10:52 pm

      For some reason, when I try to view the logo on my android phone, I cannot see it. I can view it on my husband's iphone though. Any suggestions?

      Reply
      • Skylar Bowker says

        September 29, 2019 at 6:49 am

        Two possible causes:

        1. Caching - the site has a cached version of the page/image cached and isn't displaying properly - you can resolve this by using a private/incognito window to check, and waiting for the cache to clear itself.
        2. You haven't put in both a mobile logo and retina logo. You need to fill both these fields.
        Reply
    7. nancy1 says

      October 07, 2019 at 8:28 pm

      Any hints on troubleshooting this? I followed the directions to the letter and my site looks the same on mobile as it did before installing the plugin and configuring it.

      Thanks!

      Reply
      • Skylar Bowker says

        October 08, 2019 at 5:42 am

        The Simple Category Index will display the categories wherever you use the shortcode - have you inserted the shortcode anywhere? I realize that "now go add the shortcode" is missing from the setup steps... I'll get it added.

        The video tutorial shows how to do this.

        Reply
    8. Whitney says

      October 17, 2019 at 12:57 pm

      I absolutely love this new feature! It looks so great on my site and is making the UX SO much better. I use my mobile site regularly to re-make my favorite recipes, and this feature is incredibly helpful for quick navigation. Thank you for this wonderful update!

      Reply
    9. MEGAN HOROWITCH says

      December 13, 2019 at 11:45 pm

      I just bought the Feast Plug in and use the Cook'd Pro theme. My recipe filter is broken. i'm going to implement the code to fix it, but you mention you're dropping support for this in 2020? What will take it's place for Cook'd pro so my users can view a drop down of my recipe categories?

      Reply
      • Skylar Bowker says

        December 21, 2019 at 7:24 am

        The goal is to remove the drop-down menu entirely, which is not a mobile-first experience. It's also not great for internal linking, and it causes pagespeed issues by loading unnecessary javascript. Overall, the drop-down is an outdated element and has no place in modern food blogs: https://feastdesignco.com/why-were-dropping-support-for-the-category-drop-down-menu/

        The replacement for this is to properly set up your category pages.

        Reply
    10. Mohit says

      June 01, 2020 at 12:47 pm

      Hi Skylar,

      Is there a way to lazy load the logo in the modern mobile menu? I see this as an opportunity in the google page speed while all other images lazy load. Is there something in the setting that I should be looking at?

      Thanks.

      Reply
      • Skylar says

        June 03, 2020 at 6:24 am

        No - lazyloading is for images below the fold only. You can't lazyload images above the fold.

        Reply
    11. James Strange says

      July 28, 2020 at 3:35 pm

      Thanks for the guide. Mine is now setup.

      Reply
    12. Kimberly Grimmett says

      November 03, 2020 at 2:37 pm

      Hello! Thanks for all this helpful info. For the modern mobile menu after it is created how do you point it to be used for mobile vs just the primary menu? I'm asking because I created the modern mobile menu, but have no idea what to do with it now. Thanks.

      Reply
      • Skylar says

        November 03, 2020 at 2:48 pm

        Please follow the complete tutorial above - the instructions on how it works to go live are there.

        Reply
    13. Lucy says

      February 13, 2021 at 3:58 am

      HI there. Can we change the point size of the modern mobile menu or would you recommend against this? I have a couple of longer items I'd like to include in the menu, I am reducing the words in them but they still just go onto 2 lines. Could you provide the CSS to use to control it please?

      Reply
      • Skylar says

        February 16, 2021 at 7:18 am

        This is technically possible using "Inspect Element" and CSS, but it's not a customization we recommend or support. This will require maintenance over time and too much individual guidance to support (eg. making sure people don't accidentally set the font size below 16px).

        The Modern Mobile Menu should be short and concise for SEO and accessibility reasons, with good site structure used to replace excessive navigation menus.

        Reply
    14. Kelly Malis says

      May 03, 2021 at 11:07 am

      Hello- I'm having trouble adding my Subscribe button. Could you please explain with more detail on how to do this. I've read the text above many times- just need more information on how to place the subscribe button. thank you

      Reply
      • Skylar says

        May 24, 2021 at 6:53 pm

        It's just a checkbox in the Feast Plugin settings page. Please submit a support ticket if you need further assistance.

        Reply
    15. Rebecca Kimber says

      May 24, 2021 at 5:53 pm

      Hi, I have the Foodie theme with the Feast plugin. I read your points about not adding too many pages to the menu. I understand that it's important to only link to essential pages to avoid confusing users. However, I do think a drop-down feature in the menu would be super helpful for my users. Right now, the navigation looks cluttered because I have a few top posts in the menu that contain my top content. If there was a drop-down option people would only see those pages if they click on the drop-down. Wondering if there's a way for me to add a drop-down feature in the menu?

      Reply
      • Skylar says

        May 24, 2021 at 6:52 pm

        Top posts should not be in the primary navigation menu - they belong on the homepage, and in the sidebar. The only link needed in the primary navigation is to the recipe index, which provides users a better navigation experience for mobile AND accessibility users, and enhances site structure for SEO: https://feastdesignco.com/food-blog-site-structure/

        We have no plans to support drop down menus for the Modern Menu, because they're not mobile or accessibility friendly - those are you two primary concerns. Designing primarily for a desktop user experience is a mistake.

        Reply
    16. Lauren says

      January 18, 2022 at 5:08 pm

      Is this supposed to take the place of the menu for mobile as well as desktop? I've set it up but now my desktop website is also showing as the mobile menu.

      Reply
      • Skylar says

        January 18, 2022 at 5:11 pm

        The desktop implementation is set following this tutorial: https://feastdesignco.com/modern-menu/

        You can choose how the desktop version gets displayed - we recommend the inline modern menu.

        Reply

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Themes

    • Feast Plugin grants access to all 5 themes
    • Not sure where to start? See the getting started guide

    Feast Plugin

    • Feast Plugin
    • Modern Homepage
    • Modern Sidebar
    • Modern Footer
    • Modern Mobile Menu
    • Modern Menu
    • Modern Recipe Index
    • Modern Categories
    • Modern 404
    • Recipe Update Checklist
    • Recipe Post Template

    Resources

    • Image optimization
    • Recipe Guidelines for Foodie Bloggers
    • How to write a recipe post
    • Page headings
    • SEO for Food Bloggers
    • Tutorials
    • Pagespeed Audit
    • Comments
    • Internal links

    more resources →

    Categories

    • Modern Recipe Index
    • Modern Categories
    • Posts per Page
    • How to use categories
    • Category pages need content
    • How to configure the category pages
    • Food blog site structure
    • Food blog page structure

    Classic themes

    The classic themes are only for hobby sites and any food blog interested in monetizing or SEO needs the Feast Plugin.

    • Foodie Pro Classic
    • Brunch Pro Classic
    • Cook'd Pro Classic
    • Cravings Pro Classic
    • Seasoned Pro Classic

    Footer

    ↑ back to top

    Topics

    • Food Blog Design and Appearance
    • Productivity
    • Tech and Plugins
    • Food Blogging and Promotion
    • Minimalist WordPress Themes
    • Simple WordPress Themes
    • Travel blogs
    • Knitting + DIY blogs

    Help

    • Documentation & Tutorials
    • Food Blogging Resources
    • Open A Support Ticket
    • Login
    • Your Account
    • Subscriptions
    • Downloads
    • Discounts and Coupons
    • Compatibility

    Company

    • Subscribe to newsletter
    • Privacy Policy
    • Refund policy
    • Terms & Conditions
    • Principles and Best Practices
    • Affiliates
    • Contact

    Copyright © 2023 · Feast Design Co.

    Results not typical or guaranteed. Our themes and plugins are just a small part of the overall effort involved in running a food blog. Nothing on this website shall constitute legal or financial advice, always consult a local lawyer and accountant. Accessing this website and all transactions herein are under the laws and jurisdiction of Toronto, Ontario, Canada.