{"id":2431,"date":"2021-04-19T09:10:43","date_gmt":"2021-04-19T09:10:43","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=2431"},"modified":"2021-04-19T14:37:14","modified_gmt":"2021-04-19T14:37:14","slug":"how-to-set-different-menu-preset-at-the-main-page","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/how-to-set-different-menu-preset-at-the-main-page\/","title":{"rendered":"How to set different menu preset at the main page"},"content":{"rendered":"<h2><strong>Step 1 &#8211;<\/strong>\u00a0Duplicate the main preset<\/h2>\n<p><img loading=\"lazy\" class=\"size-full wp-image-2432 aligncenter\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/dashboard-duplicate-preset-menu.png\" alt=\"\" width=\"842\" height=\"655\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/dashboard-duplicate-preset-menu.png 842w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/dashboard-duplicate-preset-menu-300x233.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/dashboard-duplicate-preset-menu-768x597.png 768w\" sizes=\"(max-width: 842px) 100vw, 842px\" \/><\/p>\n<hr \/>\n<h2><strong>Step 2 &#8211; <\/strong>Configure the duplicated preset<\/h2>\n<p>a. For example, set a transparent menu background<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2438\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/wp-menu-top-level-color-background.png\" alt=\"\" width=\"698\" height=\"686\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/wp-menu-top-level-color-background.png 698w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/wp-menu-top-level-color-background-300x295.png 300w\" sizes=\"(max-width: 698px) 100vw, 698px\" \/><\/p>\n<hr \/>\n<p>b. And enable menu overlay above the top of the content in preset settings, under General &gt; General settings<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2434\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/overlap-first-block.png\" alt=\"\" width=\"1152\" height=\"136\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/overlap-first-block.png 1152w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/overlap-first-block-300x35.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/overlap-first-block-1024x121.png 1024w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/overlap-first-block-768x91.png 768w\" sizes=\"(max-width: 1152px) 100vw, 1152px\" \/><\/p>\n<hr \/>\n<h2><strong>Step 3<\/strong> &#8211; Find the site main page under &#8220;Pages &gt; All pages&#8221;, and click on &#8220;Edit&#8221;.<\/h2>\n<p>\nAt the sidebar Groovy menu settings, set the preset with a transparent background created for special for the main menu.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-2437\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/menu-pages.png\" alt=\"\" width=\"1313\" height=\"728\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/menu-pages.png 1313w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/menu-pages-300x166.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/menu-pages-1024x568.png 1024w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2021\/04\/menu-pages-768x426.png 768w\" sizes=\"(max-width: 1313px) 100vw, 1313px\" \/><\/p>\n<h3>Related articles<\/h3>\n<ul>\n<li><a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-can-i-display-a-menu-on-certain-pages-only\/\">How can I display a menu on certain pages only?<\/a><\/li>\n<li><a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-assign-different-menus-for-taxonomies\/\">How to assign different menus for taxonomies<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Step 1 &#8211;\u00a0Duplicate the main preset Step 2 &#8211; Configure the duplicated preset a. For example, set a transparent menu &hellip; <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/how-to-set-different-menu-preset-at-the-main-page\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/2431"}],"collection":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/comments?post=2431"}],"version-history":[{"count":0,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/2431\/revisions"}],"wp:attachment":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/media?parent=2431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}