{"id":49723,"date":"2025-10-02T13:21:44","date_gmt":"2025-10-02T13:21:44","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=49723"},"modified":"2025-10-02T13:24:08","modified_gmt":"2025-10-02T13:24:08","slug":"how-to-create-vertical-mega-menu-for-bookshop-site","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/","title":{"rendered":"How to Create a Vertical Mega Menu for a Bookshop Site"},"content":{"rendered":"\n

In this guide, we will explore how to build a vertical menu from the Only Books<\/a> dynamic template, as demonstrated in the JetMenu<\/em> live demo<\/a>.<\/p>\n\n\n\n

Prepare Menu<\/strong>s<\/h2>\n\n\n\n
\n

We will create two menus: the main menu and a submenu that will be included within it and displayed vertically.<\/p>\n\n\n\n

Submenu<\/h3>\n\n\n\n

First, let\u2019s create a custom menu that will be displayed vertically later. For this purpose, open the WordPress Dashboard > Appearance > Menus<\/em><\/strong> tab. <\/p>\n\n\n\n

Here, click the \u201ccreate a new menu<\/strong>\u201d button, name your new menu (here, \u201cAll Books (Submenu)\u201d), and apply it to the needed location (e.g., \u201cMain\u201d). We don\u2019t assign the location now, as we will later display the menu in the header with JetThemeCore<\/em>.<\/p>\n\n\n\n

Press the \u201cCreate Menu<\/strong>\u201d button.<\/p>\n\n\n\n

\"all<\/a><\/div>\n\n\n\n

Now, it\u2019s time to add content to the menu. <\/p>\n\n\n\n

For example, first, we will proceed to the Products Type <\/strong>tab and tick the \u201cSelect All\u201d checkbox to add all product types to the menu. Then, click the \u201cAdd to Menu<\/strong>\u201d button.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Now, three items are added to the menu: \u201cPaper Book,\u201d \u201cE-book,\u201d and \u201cAudio Book.\u201d<\/p>\n\n\n\n

Next, let\u2019s add three more items with the help of the Custom Links <\/strong>tab. Here, paste the URL <\/strong>where you want to lead the user and set the Link Text<\/strong>. <\/p>\n\n\n\n

This way, we add \u201cAuthors,\u201d \u201cPromotions,\u201d and \u201cPublisher company\u201d links.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Hover over the first item to activate the \u201cSettings<\/strong>\u201d button. Click it to open the menu item\u2019s settings pop-up.<\/p>\n\n\n\n

\"settings<\/a><\/div>\n\n\n\n

To adjust a mega content, press the \u201cEdit Mega content<\/strong>\u201d button in the opened Mega Content <\/strong>tab.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

In the editor (Elementor in our case, but you can use Gutenberg if preferred), we add two columns. <\/p>\n\n\n\n

In the first column, we first put a Heading<\/strong> with the text \u201cCategory\u201d.<\/p>\n\n\n\n

Then, we add a JetEngine<\/em><\/a>\u2019s Listing Grid<\/strong><\/a> <\/strong>widget. In the Listing <\/strong>field, we select the previously built \u201cProduct Categories by Paper Book (for All Books Menu (submenu))\u201d listing, which displays the product categories. Create a listing using our Listing Template Overview<\/strong><\/a> for assistance.<\/p>\n\n\n\n

Additionally, we place the \u201cAll Categories\u201d Dynamic Link<\/strong><\/a> button with \u201cOptions\u201d selected as the Source<\/strong>.<\/p>\n\n\n\n

In the second column, we place one more Listing Grid <\/strong>with the \u201cBook of the Week\u201d listing, \u201cPopular publishers\u201d Heading<\/strong>, \u201cAll\u201d Button<\/strong>, and one more \u201cPublisher Company for Menu\u201d Listing Grid<\/strong>.<\/p>\n\n\n\n

Customize the style settings, and when the template is ready, press the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

\"paper<\/a><\/div>\n\n\n\n

Next, we repeat the same procedure with the \u201cE-books\u201d menu item to open the Mega Content Editor.<\/p>\n\n\n\n

This time, we add two columns to the section as well. <\/p>\n\n\n\n

The first columns will be the same as in the previous case: a \u201cCategory\u201d Heading<\/strong>, a \u201cProduct Categories by Paper Book (for All Books Menu (submenu))\u201d Listing Grid<\/strong>, and an \u201cAll Categories\u201d Dynamic Link<\/strong>.<\/p>\n\n\n\n

The second column includes the \u201cPopular E-Books\u201d Heading<\/strong> and a \u201cProduct Grid for Menu\u201d Listing Grid<\/strong>.<\/p>\n\n\n\n

When the template is fully customized, press the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

\"e-books<\/a><\/div>\n\n\n\n

Then, we create the mega content for the \u201cAudio Books\u201d menu item in the same way.<\/p>\n\n\n\n

Again, we build a two-column layout. <\/p>\n\n\n\n

The first column is the same: \u201cCategory\u201d Heading<\/strong>,  a \u201cProduct Categories by Paper Book (for All Books Menu (submenu))\u201d Listing Grid<\/strong>, and an \u201cAll Categories\u201d Dynamic Link<\/strong>.<\/p>\n\n\n\n

The second column contains the \u201cPromotion Listing for Menu\u201d Listing Grid<\/strong> this time.<\/p>\n\n\n\n

When all the changes are made, press the \u201cPublish<\/strong>\u201d button.<\/p>\n\n\n\n

\"audio<\/a><\/div>\n\n\n\n

When we return to the menu, we observe the \u201cMega Activated\u201d sign next to the items to which we added mega content.<\/p>\n\n\n\n

\"all<\/a><\/div>\n\n\n\n

When the menu is ready, click the \u201cSave Menu<\/strong>\u201d button.<\/p>\n\n\n\n

Main menu<\/h3>\n\n\n\n

Let\u2019s build a main menu that will contain the previously built \u201cAll Books Menu (Submenu)\u201d inside. To do so, push the \u201ccreate a new menu<\/strong>\u201d button.<\/p>\n\n\n\n

Set the menu name (here, \u201cAll Books Menu\u201d) and press the \u201cCreate Menu<\/strong>\u201d button.<\/p>\n\n\n\n

\"all<\/a><\/div>\n\n\n\n

Open the Custom Links <\/strong>tab and set \u201c#\u201d as the URL <\/strong>(to use it as a placeholder). Then, set the Link Text <\/strong>to \u201cAll Books\u201d and click the \u201cAdd to Menu<\/strong>\u201d button.<\/p>\n\n\n\n

\"adding<\/a><\/div>\n\n\n\n

Next, press the \u201cSettings<\/strong>\u201d button that appears once you hover over the item.<\/p>\n\n\n\n

\"settings<\/a><\/div>\n\n\n\n

In the opened pop-up, press the \u201cEdit Mega content<\/strong>\u201d button to open the mega content editor.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

Initially, we add two columns.<\/p>\n\n\n\n

In the first column, we place the Vertical Mega Menu<\/strong><\/a> <\/strong>widget and pick the just-built \u201cAll Books Menu (Submenu)\u201d in the Select Menu <\/strong>dropdown.<\/p>\n\n\n\n

In the second column, we put the \u201cPopular categories\u201d Heading<\/strong> and the \u201cProduct Categories Listing for Mega Menu (default page)\u201d Listing Grid<\/strong>.<\/p>\n\n\n\n

Press the \u201cPublish<\/strong>\u201d button when the template is ready.<\/p>\n\n\n\n

\"vertical<\/a><\/div>\n\n\n\n

If the menu is ready, press the \u201cSave Menu<\/strong>\u201d button.<\/p>\n\n\n\n

\"all<\/a><\/div>\n<\/div><\/div>\n\n\n\n

Add Menu to the Header<\/h2>\n\n\n\n
\n

Let\u2019s add a created menu to the header. For this purpose, we will use the JetThemeCore<\/em><\/a> <\/em>plugin and its Theme Builder<\/strong><\/a>.<\/p>\n\n\n\n

By proceeding to the WordPress Dashboard > Crocoblock > Theme Builder<\/em><\/strong>, click on the \u201cCreate new page template<\/strong>\u201d button to build a new theme template or select a ready one.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

If you create a new template, set up the conditions<\/a> for the template by clicking the \u201cAdd Condition<\/strong>\u201d button and selecting the needed options (for example, here we leave the default \u201cInclude,\u201d \u201cEntire,\u201d and \u201cEntire Site\u201d options).<\/p>\n\n\n\n

Press the \u201cCreate<\/strong>\u201d button.<\/p>\n\n\n\n

\"edit<\/a><\/div>\n\n\n\n

In the new template, click the \u201cOverride theme header<\/strong>\u201d button, and if you create a new header<\/a>, click the \u201cCreate template<\/strong>\u201d button.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

In the Create a template <\/strong>pop-up, select the preferred Template content type <\/strong>(we chose \u201cElementor\u201d) and set the Template name <\/strong>(we set it to \u201cHeader\u201d).<\/p>\n\n\n\n

Click the \u201cCreate<\/strong>\u201d button to proceed to the header template editor.<\/p>\n\n\n\n

\"create<\/a><\/div>\n\n\n\n

In the editor, find the Mega Menu<\/strong><\/a> <\/strong>widget and place it on the template.<\/p>\n\n\n\n

Pick the Menu <\/strong>you have built earlier and adjust its settings.<\/p>\n\n\n\n

We change the Animation <\/strong>to \u201cFade,\u201d Sub Menu Trigger <\/strong>to \u201cClick,\u201d Mega Container Width Type <\/strong>to \u201cSelector\u201d, and set the Selector <\/strong>itself to \u201c.elementor\u201d.<\/p>\n\n\n\n

Also, we deactivate icons and adjust the style settings.<\/p>\n\n\n\n

\"mega<\/a><\/div>\n\n\n\n

Add the other needed widgets, and once the template is ready, press the \u201cPublish<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n

Check the Result<\/h2>\n\n\n\n
\n

Open one of the pages you assigned the header to to view the results. For instance, we open the home page as we have assigned the header to the entire website.<\/p>\n\n\n\n

The menu you\u2019ve created should now be displayed in the header. In our case, it can be accessed via the \u201cAll Books<\/strong>\u201d button.<\/p>\n\n\n\n

As you can see, a vertical mega menu opens to display mega content when you hover over the items.<\/p>\n\n\n\n

\"mega<\/a><\/div>\n<\/div><\/div>\n\n\n\n

That\u2019s all. Now you know how to create a vertical mega menu for a WordPress bookshop site, like in the JetMenu <\/em>plugin demo page.<\/p>\n","protected":false},"excerpt":{"rendered":"

From this tutorial, you\u2019ll find out how to recreate a vertical menu similar to the one represented in the Only Books live demo with the JetMenu plugin.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[424],"yoast_head":"\nHow to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-02T13:24:08+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/10\/all-books-submenu-creation-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/\",\"name\":\"How to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2025-10-02T13:21:44+00:00\",\"dateModified\":\"2025-10-02T13:24:08+00:00\",\"description\":\"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Vertical Mega Menu for a Bookshop Site\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock","description":"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/","og_locale":"en_US","og_type":"article","og_title":"How to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock","og_description":"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/","og_site_name":"Help Center","article_modified_time":"2025-10-02T13:24:08+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/10\/all-books-submenu-creation-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/","name":"How to Create Vertical Mega Menu for a Bookshop Site \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2025-10-02T13:21:44+00:00","dateModified":"2025-10-02T13:24:08+00:00","description":"Learn the process of how to create a similar WordPress vertical menu to the one used on the Only Books dynamic template from the JetMenu live demo.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-create-vertical-mega-menu-for-bookshop-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Vertical Mega Menu for a Bookshop Site"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/49723"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=49723"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=49723"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=49723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}