{"id":1453,"date":"2020-03-20T12:40:34","date_gmt":"2020-03-20T12:40:34","guid":{"rendered":"https:\/\/grooni.com\/docs\/groovy-menu\/?page_id=1453"},"modified":"2021-03-05T15:29:38","modified_gmt":"2021-03-05T15:29:38","slug":"how-to-add-custom-top-bar-menu-using-actions","status":"publish","type":"page","link":"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-add-custom-top-bar-menu-using-actions\/","title":{"rendered":"How to add custom top bar menu using Groovy menu Actions"},"content":{"rendered":"<p>Let&#8217;s break down with an example of how to add an additional navigation menu and other custom content in the top navigation bar using <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/mega-menu-actions\/\">actions<\/a><\/p>\n<div class=\"alert alert-warning\">Starting with <strong>Groovy Menu 2.4.9<\/strong> we have added a feature of simplified addition and customization of an secondary menu directly in the preset settings. <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-add-a-secondary-top-bar-menu\/\">Read more<\/a><\/div>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1454\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/toolbar-custom-menu.png\" alt=\"\" width=\"651\" height=\"115\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/toolbar-custom-menu.png 651w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/toolbar-custom-menu-300x53.png 300w\" sizes=\"(max-width: 651px) 100vw, 651px\" \/><\/p>\n<p>Groovy Menu has the ability to use actions that run in different places of the Groovy Menu. For <strong>topbar<\/strong> (toolbar) these are the following actions:<\/p>\n<ul>\n<li>gm_toolbar_left_first<\/li>\n<li>gm_toolbar_left_last<\/li>\n<li>gm_toolbar_right_first<\/li>\n<li>gm_toolbar_right_last<\/li>\n<\/ul>\n<p>Before you begin, you need to make sure that you have a Child theme. For any WordPress theme (Parent Theme), a Child theme can be created. Read more here <a href=\"https:\/\/developer.wordpress.org\/themes\/advanced-topics\/child-themes\/\">How to create a child theme<\/a><\/p>\n<p>All changes in the code will need to be made in the functions.php file of your Child theme.<\/p>\n\n\n<h3>1.First register in WordPress custom Theme Location for Menus.<\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Register custom nav menu location.\nadd_action( 'after_setup_theme', 'groovy_menu_custom_register_nav_menu' );\nfunction groovy_menu_custom_register_nav_menu() {\n\tregister_nav_menu( 'gm_custom_toolbar_menu', 'Groovy Menu custom toolbar menu' );\n}<\/code><\/pre>\n\n\n<p>After that, in <code>WP Dashboard -&gt; Appearance -&gt; Menus<\/code>, it will be possible to assign a navigation menu for the location &#8220;<strong>Groovy Menu custom toolbar menu<\/strong>&#8220;.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1455\" src=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/groovy-menu-custom-toolbar-menu.png\" alt=\"\" width=\"1102\" height=\"787\" srcset=\"https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/groovy-menu-custom-toolbar-menu.png 1102w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/groovy-menu-custom-toolbar-menu-300x214.png 300w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/groovy-menu-custom-toolbar-menu-1024x731.png 1024w, https:\/\/grooni.com\/docs\/groovy-menu\/wp-content\/uploads\/sites\/3\/2020\/03\/groovy-menu-custom-toolbar-menu-768x548.png 768w\" sizes=\"(max-width: 1102px) 100vw, 1102px\" \/><\/p>\n\n\n<h2>2. Add function<\/h2>\n\n\n\n<p>Add the text of the function, the task of which, when called, will draw the navigation menu from the location registered in the paragraph above.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Output custom menu from nav menu location: gm_custom_toolbar_menu\nfunction groovy_menu_custom_toolbar_menu() {\n\t$args = array(\n\t\t'theme_location'  => 'gm_custom_toolbar_menu',\n\t\t'menu'            => '',\n\t\t'container'       => 'div',\n\t\t'container_class' => 'gm-custom-toolbar-nav-container',\n\t\t'container_id'    => '',\n\t\t'menu_class'      => 'gm-custom-toolbar-nav',\n\t\t'menu_id'         => '',\n\t\t'echo'            => true,\n\t\t'fallback_cb'     => 'wp_page_menu',\n\t\t'before'          => '',\n\t\t'after'           => '',\n\t\t'link_before'     => '',\n\t\t'link_after'      => '',\n\t\t'items_wrap'      => '&lt;ul id=\"%1$s\" class=\"%2$s\">%3$s&lt;\/ul>',\n\t\t'depth'           => 0,\n\t\t'walker'          => '',\n\t);\n\n\twp_nav_menu( $args );\n}<\/code><\/pre>\n\n\n\n<h2>3. Add a hook<\/h2>\n\n\n<p>Add a hook for one of the action that will fire in the Groovy Menu toolbar. For example, we chose action, which will work on the right side of the toolbar before the output of social buttons<\/p>\n\n\n<pre class=\"wp-block-code\"><code>add_action( 'gm_toolbar_right_first', 'groovy_menu_custom_toolbar_menu', 10 );<\/code><\/pre>\n\n\n<p>This is enough to display the menu from the <code>Appearance -&gt; Menus<\/code> editor in the toolbar Groovy Menu.<\/p>\n<p><strong>All text of PHP code for functions.php<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\"><code>\/\/ Register custom nav menu location.\nadd_action( 'after_setup_theme', 'groovy_menu_custom_register_nav_menu' );\nfunction groovy_menu_custom_register_nav_menu() {\n\tregister_nav_menu( 'gm_custom_toolbar_menu', 'Groovy Menu custom toolbar menu' );\n}\n\n\/\/ Output custom menu from nav menu location: gm_custom_toolbar_menu\nfunction groovy_menu_custom_toolbar_menu() {\n\t$args = array(\n\t\t'theme_location'  => 'gm_custom_toolbar_menu',\n\t\t'menu'            => '',\n\t\t'container'       => 'div',\n\t\t'container_class' => 'gm-custom-toolbar-nav-container',\n\t\t'container_id'    => '',\n\t\t'menu_class'      => 'gm-custom-toolbar-nav',\n\t\t'menu_id'         => '',\n\t\t'echo'            => true,\n\t\t'fallback_cb'     => 'wp_page_menu',\n\t\t'before'          => '',\n\t\t'after'           => '',\n\t\t'link_before'     => '',\n\t\t'link_after'      => '',\n\t\t'items_wrap'      => '&lt;ul id=\"%1$s\" class=\"%2$s\">%3$s&lt;\/ul>',\n\t\t'depth'           => 0,\n\t\t'walker'          => '',\n\t);\n\n\twp_nav_menu( $args );\n}\n\n\/\/ Add hook for toolbar\nadd_action( 'gm_toolbar_right_first', 'groovy_menu_custom_toolbar_menu', 10 );<\/code><\/pre>\n\n\n\n<h2>4.Stylize the menu items<\/h2>\n\n\n<p>It remains only to stylize the menu items so that their appearance matches the design of your site.<\/p>\n<p>We suggest writing them in the <code>Groovy Menu -&gt; General -&gt; Custom CSS<\/code> preset editor or in <code>Customize -&gt; Additional CSS<\/code> of your theme.<\/p>\n\n\n<pre class=\"wp-block-code\"><code>\/* ------------------------------------ *\/\n\/* Custom Toolbar Menu: Main CSS Styles *\/\n\/* ------------------------------------ *\/\n.gm-custom-toolbar-nav-container {\n  padding: 0;\n  margin: 6px 16px 0 0;\n  border: 0;\n  width: auto;\n  font-size: 12px;\n}\n.gm-custom-toolbar-nav-container ul,\n.gm-custom-toolbar-nav-container li {\n  list-style: none;\n  margin: 0 0 0 0;\n  padding: 0;\n}\n.gm-custom-toolbar-nav-container > ul > li {\n  margin-left: 2px;\n  margin-right: 2px;\n}\n.gm-custom-toolbar-nav-container ul {\n  position: relative;\n  z-index: 100107;\n}\n.gm-custom-toolbar-nav-container ul li {\n  float: left;\n  min-height: 1px;\n  vertical-align: middle;\n}\n.gm-custom-toolbar-nav-container ul li.hover,\n.gm-custom-toolbar-nav-container ul li:hover {\n  position: relative;\n  z-index: 100109;\n  cursor: default;\n}\n.gm-custom-toolbar-nav-container ul ul {\n  visibility: hidden;\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 100108;\n  width: 100%;\n}\n.gm-custom-toolbar-nav-container ul ul li {\n  float: none;\n}\n.gm-custom-toolbar-nav-container ul ul ul {\n  top: 0;\n  left: 190px;\n  width: 190px;\n}\n.gm-custom-toolbar-nav-container ul li:hover > ul {\n  visibility: visible;\n}\n.gm-custom-toolbar-nav-container ul ul {\n  bottom: 0;\n  left: 0;\n}\n.gm-custom-toolbar-nav-container ul ul {\n  margin-top: 0;\n}\n.gm-custom-toolbar-nav-container ul ul li {\n  font-weight: normal;\n}\n.gm-custom-toolbar-nav-container a {\n  display: block;\n  line-height: 1em;\n  text-decoration: none;\n}\n.gm-custom-toolbar-nav-container > ul {\n  display: inline-block;\n}\n.gm-custom-toolbar-nav-container:after,\n.gm-custom-toolbar-nav-container ul:after {\n  content: '';\n  display: block;\n  clear: both;\n}\n\/* -------------------------------------- *\/\n\/* Custom Toolbar Menu: Custom CSS Styles *\/\n\/* -------------------------------------- *\/\n\/* TOP menu link style *\/\n.gm-custom-toolbar-nav-container a {\n  background: #777777;\n  color: #ffffff;\n  padding: 0 20px;\n}\n\/* SUB menu link style *\/\n.gm-custom-toolbar-nav-container ul ul a {\n  background: #777777;\n  color: #ffffff;\n  border: 1px solid #555555;\n  border-top: 0 none;\n  line-height: 150%;\n  padding: 8px 20px;\n}\n\/* TOP menu link Hover style *\/\n.gm-custom-toolbar-nav-container ul li:hover > a,\n.gm-custom-toolbar-nav-container ul li.active > a {\n  background: #777777;\n  color: #ffffff;\n}\n\/* SUB menu link Hover style *\/\n.gm-custom-toolbar-nav-container ul ul li:hover > a {\n  background: #888888;\n  color: #ffffff;\n}\n\/* SUB menu List style *\/\n.gm-custom-toolbar-nav-container ul ul {\n  border-top: 3px solid #555555;\n  text-transform: none;\n  min-width: 170px;\n}\n.gm-custom-toolbar-nav-container ul ul ul {\n  border-top: 0 none;\n}\n.gm-custom-toolbar-nav-container ul ul li {\n  position: relative;\n}\n.gm-custom-toolbar-nav-container ul ul li:first-child > a {\n  border-top: 1px solid #555555;\n}\n.gm-custom-toolbar-nav-container ul ul li:last-child > a {\n  -moz-border-radius: 0 0 3px 3px;\n  -webkit-border-radius: 0 0 3px 3px;\n  border-radius: 0 0 3px 3px;\n  -moz-background-clip: padding;\n  -webkit-background-clip: padding-box;\n  background-clip: padding-box;\n}\n.gm-custom-toolbar-nav-container ul ul li.menu-item-has-children > a:after {\n  content: '+';\n  position: absolute;\n  top: 50%;\n  right: 15px;\n  margin-top: -8px;\n}\n.gm-custom-toolbar-nav-container ul li.menu-item-has-children > a:after {\n  content: '+';\n  margin-left: 5px;\n}\n.gm-custom-toolbar-nav-container ul li.last ul {\n  left: auto;\n  right: 0;\n}\n.gm-custom-toolbar-nav-container ul li.last ul ul {\n  left: auto;\n  right: 99.5%;\n}\n.gm-custom-toolbar-nav-container > ul > li > a {\n  line-height: 24px;\n}<\/code><\/pre>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s break down with an example of how to add an additional navigation menu and other custom content in the &hellip; <a href=\"https:\/\/grooni.com\/docs\/groovy-menu\/faq\/how-to-add-custom-top-bar-menu-using-actions\/\">Read more &rarr;<\/a><\/p>\n","protected":false},"author":3,"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\/1453"}],"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=1453"}],"version-history":[{"count":0,"href":"https:\/\/grooni.com\/docs\/groovy-menu\/wp-json\/wp\/v2\/pages\/1453\/revisions"}],"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=1453"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}