{"id":7517,"date":"2026-04-10T02:26:50","date_gmt":"2026-04-10T00:26:50","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=7517"},"modified":"2026-04-10T02:26:51","modified_gmt":"2026-04-10T00:26:51","slug":"ollie-menu-designer-creating-modern-wordpress-navigation","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/","title":{"rendered":"Ollie Menu Designer: Creating Modern WordPress Navigation"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Standard WordPress menus are often limited to simple lists of text links. <strong>Ollie Menu Designer<\/strong> is a free plugin designed for modern block themes that transforms your navigation into a rich, visual experience. By using the native WordPress block editor, it allows you to build &#8220;Mega Menus&#8221; and custom mobile interfaces using the same blocks you use for your pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This tool is especially useful for <strong>mybox<\/strong> users who want high-end navigation without the performance bloat of traditional page builders.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#Key_Features_of_Ollie_Menu_Designer\" >Key Features of Ollie Menu Designer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#Step-by-Step_Installation\" >Step-by-Step Installation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#How_to_Build_a_Mega_Menu\" >How to Build a Mega Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#Distinction_Block\" >Distinction Block<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#Practical_Implications\" >Practical Implications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/ollie-menu-designer-creating-modern-wordpress-navigation\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Key_Features_of_Ollie_Menu_Designer\"><\/span>Key Features of Ollie Menu Designer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block-Based Design:<\/strong> You can insert images, buttons, columns, search bars, and even product grids directly into your dropdown menus.<\/li>\n\n\n\n<li><strong>Mega Menus:<\/strong> Easily create multi-column layouts to organize large amounts of content or highlight featured posts.<\/li>\n\n\n\n<li><strong>Mobile-First Navigation:<\/strong> Replace the default &#8220;hamburger&#8221; menu with a custom-designed mobile overlay that is touch-friendly and visually consistent with your brand.<\/li>\n\n\n\n<li><strong>Intelligent Edge Detection:<\/strong> The plugin automatically detects the edges of the browser window and adjusts dropdown positions so they are never cut off.<\/li>\n\n\n\n<li><strong>Accessibility:<\/strong> Built with ARIA support and keyboard navigation to ensure your menu works for everyone.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step-by-Step_Installation\"><\/span>Step-by-Step Installation<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-3451626761\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">The plugin works with any modern block theme, though it offers extra templates if you are using the free <strong>Ollie<\/strong> theme.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Log in to your WordPress dashboard.<\/li>\n\n\n\n<li>Go to <strong>Plugins > Add New<\/strong>.<\/li>\n\n\n\n<li>Search for <strong>&#8220;Ollie Menu Designer&#8221;<\/strong>.<\/li>\n\n\n\n<li>Click <strong>Install Now<\/strong> and then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Build_a_Mega_Menu\"><\/span>How to Build a Mega Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Once activated, you don&#8217;t manage your menu in the old &#8220;Menus&#8221; screen. Instead, you use the <strong>Site Editor<\/strong>:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Go to <strong>Appearance > Editor<\/strong> and select your <strong>Header<\/strong> template part.<\/li>\n\n\n\n<li>Click on your <strong>Navigation block<\/strong>.<\/li>\n\n\n\n<li>In the block inserter (the <strong>+<\/strong> icon), search for the <strong>Dropdown Menu<\/strong> block provided by Ollie.<\/li>\n\n\n\n<li>Give your dropdown a name (e.g., &#8220;Services&#8221;).<\/li>\n\n\n\n<li>In the block settings sidebar, click <strong>&#8220;Create a new one&#8221;<\/strong> under the Dropdown Menu panel.<\/li>\n\n\n\n<li>A new editor canvas will open. Here, you can add columns, images, and links just like a mini-page.<\/li>\n\n\n\n<li><strong>Save<\/strong> and return to your header.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Distinction_Block\"><\/span>Distinction Block<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Menu Designer vs. Standard Navigation<\/strong> Standard WordPress navigation only allows for text and sub-menus. <strong>Menu Designer<\/strong> turns every dropdown into a &#8220;Container Block,&#8221; allowing you to treat your navigation as a canvas for any type of content.<\/p>\n<\/blockquote>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Practical_Implications\"><\/span>Practical Implications<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Performance:<\/strong> Because the plugin uses native WordPress APIs and blocks, it adds almost no extra weight to your site&#8217;s loading time on the <strong>mybox<\/strong> infrastructure.<\/li>\n\n\n\n<li><strong>No Code Required:<\/strong> You can achieve &#8220;Premium Theme&#8221; navigation styles entirely through the visual editor.<\/li>\n\n\n\n<li><strong>Mobile Customization:<\/strong> You can set specific breakpoints for when your desktop menu should switch to your custom mobile design, giving you total control over the responsive experience.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ollie Menu Designer is a &#8220;bridge&#8221; between the simplicity of WordPress and the power of professional web design. It allows you to create engaging, functional navigation that improves user experience and site aesthetics while remaining lightweight and easy to manage.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[25,58],"manual_kb_tag":[],"class_list":["post-7517","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-hosting","manualknowledgebasecat-web-applications-cms"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7517\/revisions"}],"predecessor-version":[{"id":7518,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/7517\/revisions\/7518"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=7517"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=7517"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=7517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}