{"id":5016,"date":"2019-01-31T09:25:32","date_gmt":"2019-01-31T09:25:32","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=5016"},"modified":"2023-04-18T13:40:05","modified_gmt":"2023-04-18T13:40:05","slug":"how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/","title":{"rendered":"How to Change the Menu Items Style on Hover and Click"},"content":{"rendered":"\n

As a matter of fact, you can easily create a stylish menu appearance using the JetMenu<\/a> plugin. It allows the creation of eye-catching mega menu items and also provides hundreds of stylization options for the main menu and submenu items.<\/p>\n\n\n\n

From this tutorial, you\u2019ll learn how to adjust the style settings of the menu items on hover<\/strong> and click<\/strong> according to your needs with the JetMenu<\/a> plugin for Elementor<\/a>.<\/p>\n\n\n\n

Customizing the Menu Items Style on Hover and Click<\/h2>\n\n\n\n
\n

You can style up the main menu item’s appearance on hover and click from WordPress Dashboard<\/strong> or Elementor<\/strong> page builder. Proceed to the JetMenu > Main Menu Styles<\/strong> or directly via Elementor<\/strong> page builder to customize the styles for Mega Menu<\/strong><\/a> or Vertical Mega Menu<\/strong> <\/a>widget.<\/p>\n\n\n\n

In this tutorial, we\u2019re going to change the menu items style on hover<\/strong> in Elementor<\/strong>.<\/p>\n\n\n\n

Add the Mega Menu<\/strong> widget to the page you\u2019re editing or to the header template.<\/p>\n\n\n\n\"mega\n\n\n\n

Open Style > Main Menu Items<\/strong> block in the sidebar on the left.
Here you can access the Normal<\/strong>, Hover,<\/strong> and Active<\/strong> settings for the Main Menu<\/strong> items.<\/p>\n\n\n\n\"style\n\n\n\n

Just switch between the modes and define the different style settings for each of them whenever you need to alter the main menu item\u2019s appearance on hover or when it becomes active.<\/p>\n\n\n\n

E.g., you can change the item\u2019s text or description color when you hover over it.<\/p>\n<\/div><\/div>\n\n\n\n

Colors and Backgrounds<\/h2>\n\n\n\n
\n

Also, you can set a different color for the item\u2019s icon<\/strong> and set the color for the drop-down arrow<\/strong> so that it changes when the drop-down opens.<\/p>\n\n\n\n

You can as well set different background color<\/strong> and use different background types. E.g., keep using the solid color in the normal mode and add a gradient with the light opacity on hover and when the item becomes active.<\/p>\n\n\n\n\"main\n\n\n\n

Another effect is to underline the item when one hover over it. To accomplish this, you can add a Solid border<\/strong> type on hover and then set its width to 0 px for Top<\/strong>, Right<\/strong> and Left<\/strong> and set the necessary border width (e.g., 3 px) for the Bottom <\/strong>value.<\/p>\n\n\n\n

The border color can also be adjusted.<\/p>\n\n\n\n

Actually, it can be fun to manage the main menu item\u2019s appearance on hover and when they become active. You can create different stylish designs in a matter of a few clicks.<\/p>\n<\/div><\/div>\n\n\n\n

Customizing Sub Menu Items Style<\/h2>\n\n\n\n
\n

Also, the same Hover<\/strong> and Active<\/strong> modes are available for the Sub menu items<\/strong>. To access them, open the Sub Menu<\/strong> block and here, look for the corresponding settings.<\/p>\n\n\n\n\"customizing\n<\/div><\/div>\n\n\n\n

After you\u2019re done with creating the styles for Hover<\/strong> and Active<\/strong> modes of your menu items, save all the changes by clicking the Update<\/strong> button below.<\/p>\n","protected":false},"excerpt":{"rendered":"

Find out how to change the style and behavior of the mega menu items once the user hovers and clicks on the items. <\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[256],"yoast_head":"\nHow to Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!\" \/>\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-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-18T13:40:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_133.png\" \/>\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=\"3 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-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/\",\"name\":\"How to Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-01-31T09:25:32+00:00\",\"dateModified\":\"2023-04-18T13:40:05+00:00\",\"description\":\"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/#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 Change the Menu Items Style on Hover and Click\"}]},{\"@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 Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock","description":"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!","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-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/","og_locale":"en_US","og_type":"article","og_title":"How to Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock","og_description":"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/","og_site_name":"Help Center","article_modified_time":"2023-04-18T13:40:05+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/Screenshot_133.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/","name":"How to Set up Menu Items Styles in Elementor \u2014 JetMenu | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-01-31T09:25:32+00:00","dateModified":"2023-04-18T13:40:05+00:00","description":"Find how to adjust the settings of JetMenu to change items' hover and click style. Use Crocoblock plugin functionality to set up an eye-catching menu!","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetmenu\/how-to-change-the-menu-items-style-on-hover-and-click-using-jetmenu-plugin-for-elementor\/#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 Change the Menu Items Style on Hover and Click"}]},{"@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\/5016"}],"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\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=5016"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=5016"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=5016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}