{"id":41625,"date":"2015-02-10T06:52:13","date_gmt":"2015-02-10T11:52:13","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=41625"},"modified":"2020-02-06T10:27:50","modified_gmt":"2020-02-06T15:27:50","slug":"drupal-7-x-create-menu-separator-non-clickable-menu-item","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/drupal-7-x-create-menu-separator-non-clickable-menu-item.html","title":{"rendered":"Drupal 7.x. How to create a separator menu item"},"content":{"rendered":"<p>\r\n<\/p>\r\n<p>This tutorial is going to show you how to create a separator menu item in Drupal 7 template.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=6OK8FicI4jc?width=1280&amp;height=720\" rel=\"prettyPhoto\">Drupal 7.x. How to create a menu separator menu item<\/a><\/p>\r\n<p>The default menu module does not allow you to add a menu item without menu path. To be able to create a menu item without link, you need to install additional <strong>Special menu items<\/strong> module. Using Special menu items module you can add 2 menu types:<\/p>\r\n<ul class=\"list\">\r\n<li>\r\n<p><strong>Separator<\/strong> menu item allows you to separate menus visually. Default separator title is &#8220;&#8212;&#8212;-&#8220;.<\/p>\r\n<\/li>\r\n<li>\r\n<p><strong>No link<\/strong> menu item will be rendered similar to a normal menu link item but there will be no link just the title.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<ol>\r\n<li>\r\n<p>Download and enable <strong>Special menu items<\/strong> module. Log into your Drupal admin panel, go under <strong>Modules<\/strong> > <strong>Install New Module <\/strong>page. Upload the module file from the link or upload file from your computer. Click here to download Special menu items module:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-1-300x164.jpg\" alt=\"Drupal_7.x._How_to_create a_menu_separator_menu_item-1\" width=\"300\" height=\"164\" class=\"aligncenter size-medium wp-image-41626\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-1-300x164.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-1-150x82.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-1.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Check the module under <strong>Modules<\/strong> tab in your admin panel and click on<strong> Save configuration<\/strong> button:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-2-300x228.jpg\" alt=\"Drupal_7.x._How_to_create a_menu_separator_menu_item-2\" width=\"300\" height=\"228\" class=\"aligncenter size-medium wp-image-41627\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-2-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-2-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-2.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>After installing and enabling the module, you can add new menu items. Go under <strong>Structure<\/strong> > <strong>Menus<\/strong> > <strong>Main Menu<\/strong> > <strong>Add link<\/strong> tab:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-3-300x93.jpg\" alt=\"Drupal_7.x._How_to_create a_menu_separator_menu_item-3\" width=\"300\" height=\"93\" class=\"aligncenter size-medium wp-image-41628\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-3-300x93.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-3-150x46.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-3.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>Specify your menu item title, description and other settings. Enter <strong>&lt;nolink&gt;<\/strong> to generate non-linkable item, enter <strong>&lt;separator&gt;<\/strong> to generate separator item to the path field:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-4-300x228.jpg\" alt=\"Drupal_7.x._How_to_create a_menu_separator_menu_item-4\" width=\"300\" height=\"228\" class=\"aligncenter size-medium wp-image-41629\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-4-300x228.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-4-150x114.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2014\/12\/Drupal_7.x._How_to_create-a_menu_separator_menu_item-4.jpg 1000w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li>\r\n<p>After adding new menu item to the menu you will notice that its style differs from the other menu items. In order to change menu item style, modify css files. Use Firebug for Firefox in order to find out css class for your new menu items. You can follow our video tutorial &#8220;<a href=\"\/help\/how-to-create-css-rules-for-specific-page-in-wordpress-joomla-and-drupal.html\" target=\"_blank\">How to create CSS rules for specific page in WordPress, Joomla and Drupal<\/a>&#8220;. It will show you how to add a new css class.<\/p>\r\n<\/li>\r\n<li>\r\n<p>Add CSS code for your new menu item at the end of<strong> sites\/all\/themes\/theme###\/css\/style.css<\/strong> file (### is a number).<\/p>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=6OK8FicI4jc?width=1280&amp;height=720\" rel=\"prettyPhoto\">Drupal 7.x. How to create a menu separator menu item<\/a>\r\n<\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial is going to show you how to create a menu separator menu item in Drupal 7 template.<\/p>\n","protected":false},"author":55,"featured_media":43695,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[723],"tags":[593,571,1411,1713],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/41625"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=41625"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/41625\/revisions"}],"predecessor-version":[{"id":86432,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/41625\/revisions\/86432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/43695"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=41625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=41625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=41625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}