• 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 » News & Updates

    Modern Menu for Desktop

    Published: Sep 7, 2021 · Modified: Jun 12, 2022 by Skylar · 11 Comments

    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
    • Hamburger Modern Menu
    • Theme menu
    • User experience
    • Subscribe button
    • Purpose
    • Editing
    • Troubleshooting
    • Customizing
    • Inline Modern Mobile Menu

    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
      • Due to space constraints, this is limited to the first 3 items only
      • you can reorder your social icons with a filter (due to technical complexity we don't offer support for this)

    Note: this uses the feast-modern-mobile-menu you created when setting up the Modern Mobile Menu.

    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.

  • Link
  • Navigation
  • Footer
  • Primary navigation
  • ✔
  • x
  • Logo (homepage link)
  • ✔
  • x
  • About
  • ✔
  • x
  • Recipes (index)
  • ✔
  • x
  • Search
  • ✔
  • x
  • Contact
  • x
  • ✔
  • Email address*
  • x
  • ✔
  • Privacy Policy
  • x
  • ✔
  • Terms and Conditions
  • x
  • ✔
  • Accessibility Statement
  • x
  • ✔
  • Newsletter (Subscribe)
  • x
  • ✔
  • Work with me (Services)
  • x
  • ✔
  • FAQ
  • x
  • ✔
  • "As seen in"
  • x
  • ✔
  • Amazon disclaimer
  • x
  • ✔
  • Copyright statement
  • x
  • ✔
  • Sitemap
  • x
  • x
  • For SEO, accessibility and user experience reasons, we don't recommend having 2 navigation menus, or stuffing the header with too much content unrelated to the main content (the recipes). The purpose of the menu is to provide top-level navigation to key pages.

    Editing

    As of version 6.4.5, we've added "edit" links to the left side of the Modern Menu, to make it easier to access the sections.

    This only shows to the admin when logged in, not to site visitors.

    Troubleshooting

    Why is the wrong menu showing?

    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.

    Why is the formatting off?

    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.

    Why do the words stack on top of each other?

    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".

    Can I do a drop down menu?

    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.

    Can I use submenus?

    No, the primary navigation menu should be focused, and concise. Drop down menus and sub-menus are the same thing.

    Why aren't my social icons showing?

    You'll need to follow the instructions for setting up the Modern Mobile Menu Social Icons.

    Why are my social icons on two lines?

    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.

    Why do I have two menus?

    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.

    More

    • Modern 404
    • Private Label Rights (PLR)
    • Focus
    • Process Shots

    Reader Interactions

    Comments

    1. Bea says

      September 10, 2021 at 2:51 am

      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?

      Reply
      • Skylar says

        September 25, 2021 at 8:53 am

        The social icons have been integrated into the 6.2.0 release!

        Reply
        • Bea says

          September 30, 2021 at 12:42 am

          Thank you so much!

          Reply
        • Yasmin says

          April 14, 2022 at 5:11 pm

          Is there a simple way to add anchor text to the magnifying glass button in order to link it directly to slickstream search?

          Reply
    2. Rads says

      September 11, 2021 at 7:24 am

      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.

      Reply
      • Skylar says

        September 25, 2021 at 8:53 am

        Go ahead and submit a support ticket and we'll look into the issue.

        Reply
    3. Alex says

      September 23, 2021 at 4:15 pm

      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. :/

      Reply
      • Skylar says

        September 25, 2021 at 8:53 am

        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.

        Reply
    4. Sally says

      October 12, 2021 at 6:42 am

      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?

      Reply
      • Skylar says

        October 12, 2021 at 9:34 am

        Due to space constraints with other items in the menu, it's only possible to display 3.

        Reply
    5. Ashley says

      March 20, 2022 at 5:20 pm

      Is it possible to turn the sticky menu off? I wanted to use the filmstrip setting on the Slickstream plugin, but the sticky menu would conflict with that.

      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.