{"id":2767,"date":"2026-09-11T07:20:25","date_gmt":"2026-09-11T07:20:25","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=2767"},"modified":"2026-09-12T06:03:09","modified_gmt":"2026-09-12T06:03:09","slug":"how-to-change-the-menu-background-and-logo-for-selected-menu-items","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-change-the-menu-background-and-logo-for-selected-menu-items\/","title":{"rendered":"How to change the menu background and logo for selected menu items"},"content":{"rendered":"

In Groovy Menu Pro 2.6.5, a selected top-level item can change the background of the entire Classic desktop menu and display the Alternative Logo. You can activate this state on hover or while the item’s submenu is open.<\/p>\n

1. Create or choose a navigation menu<\/h2>\n

Go to Appearance > Menus<\/strong>. Select an existing menu or click create a new menu<\/strong>. Add the top-level item that should trigger the change. If you want to use the When item is opened<\/strong> trigger, add at least one submenu item below it by dragging that item slightly to the right, or configure a Mega Menu for that top-level item. Click Save Menu<\/strong>.<\/p>\n

\"WordPress
Create or select the navigation menu in Appearance > Menus.<\/figcaption><\/figure>\n

2. Assign the menu and a Classic preset<\/h2>\n

Open Groovy Menu > Dashboard<\/strong> and choose the preset you will use. The selected-item state is available for the Classic<\/strong> desktop menu type. In Global settings > Taxonomies<\/strong>, select it under Default preset for all content<\/strong> and select your WordPress menu under Default navigation menu for all content<\/strong>. Click Save changes<\/strong>. If a page has its own preset or menu override, make sure it uses the same configuration.<\/p>\n

\"Groovy
Assign the preset and navigation menu used on the site.<\/figcaption><\/figure>\n

3. Upload both logos<\/h2>\n

From Groovy Menu > Dashboard<\/strong>, open Global settings > Logo<\/strong>. Upload the Default logo<\/strong> and the Alternative logo<\/strong>, then click Save changes<\/strong>. The Alternative logo is the image that appears when the selected-item state is active.<\/p>\n

\"Groovy
Upload the Default logo and Alternative logo in Global settings.<\/figcaption><\/figure>\n

4. Enable the logo switch in the preset<\/h2>\n

Edit the preset from Groovy Menu > Dashboard<\/strong>. In General > General settings<\/strong>, choose Classic<\/strong> as the menu type. Then open General > Logo<\/strong>, select Image<\/strong> for Logo type<\/strong>, and enable Switch logo to alternative on selected item state<\/strong>.<\/p>\n

\"Classic
Enable the Alternative Logo switch in General > Logo.<\/figcaption><\/figure>\n

5. Set the background color and trigger<\/h2>\n

In the same preset, open Styles > Background<\/strong>. Enable Change top level menu background when a submenu is opened<\/strong>, then choose the active color under Top level menu background when a submenu is opened<\/strong>. Set Opened submenu background scope<\/strong> to Selected menu item only<\/strong>. Under Selected item state trigger<\/strong>, choose On hover<\/strong> or When item is opened<\/strong>. Save the preset.<\/p>\n

On hover<\/strong> works even when the item has no submenu. When item is opened<\/strong> requires an open Dropdown or Mega Menu. If the sticky menu should use a different active color, also configure Change sticky top level menu background when a submenu is opened<\/strong> and Sticky top level menu background when a submenu is opened<\/strong>.<\/p>\n

\"Classic
Choose the active menu background color, scope, and trigger.<\/figcaption><\/figure>\n

6. Select the top-level item<\/h2>\n

Return to Appearance > Menus<\/strong>, expand the required top-level<\/strong> menu item, and click Groovy Menu item options<\/strong>. Enable Use selected item state<\/strong> and click Save<\/strong> inside that window. Click the WordPress Save Menu<\/strong> button as well if you changed the menu structure. The WordPress button alone does not save settings inside the Groovy Menu item options window.<\/p>\n

\"Groovy
Enable Use selected item state for each top-level item that should trigger the change.<\/figcaption><\/figure>\n

Check the result<\/h2>\n

Open the site on a desktop and hover over the selected item, or open its submenu, depending on the trigger you chose. The top-level menu background and logo should change together. If nothing happens, check that the correct menu and Classic preset are assigned, the Alternative logo is uploaded, and Use selected item state<\/strong> is enabled on that item. If the site uses a page or asset cache, clear it after saving the preset.<\/p>\n","protected":false},"excerpt":{"rendered":"

In Groovy Menu Pro 2.6.5, a selected top-level item can change the background of the entire Classic desktop menu and … Read more →<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"parent":682,"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\/2767"}],"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"}],"replies":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/comments?post=2767"}],"version-history":[{"count":2,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/2767\/revisions"}],"predecessor-version":[{"id":2779,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/2767\/revisions\/2779"}],"up":[{"embeddable":true,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/682"}],"wp:attachment":[{"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/media?parent=2767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}