{"id":36375,"date":"2014-09-30T10:19:07","date_gmt":"2014-09-30T14:19:07","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=36375"},"modified":"2016-04-08T06:50:36","modified_gmt":"2016-04-08T10:50:36","slug":"wordpress-advanced-menu-item-options","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/wordpress-advanced-menu-item-options.html","title":{"rendered":"WordPress. Advanced menu item options"},"content":{"rendered":"

\r\n<\/p>\r\n

This tutorial is going to show you how to work with the advanced menu item options.<\/p>\r\n

WordPress. Advanced menu item options<\/a><\/p>\r\n

WordPress allows you to add additional settings to your site menu.<\/p>\r\n

    \r\n
  1. \r\n

    To access the settings, log into your WordPress admin panel and go to the Appearance > Menus<\/strong> tab.<\/p>\r\n

    \"WordPress._Advanced_menu_item_options_1\"<\/a><\/p>\r\n<\/li>\r\n

  2. \r\n

    To enable advanced options, click the Screen Options<\/strong> drop down in the top-right corner of your screen.<\/p>\r\n

    \"WordPress._Advanced_menu_item_options_2\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

    You will see: Link Target, CSS Classes, Link Relationship (XFN), <\/em>and Description<\/em> options.<\/p>\r\n

    \"WordPress._Advanced_menu_item_options_3\"<\/a><\/p>\r\n

    Link Target<\/h3>\r\n

    This option controls whether the link opens in a new browser tab. Check the Link Target <\/strong>advanced property within Screen Options to enable this setting for the individual menu item.<\/p>\r\n

    Expand any menu item, check Open link in a new window\/tab<\/strong> option.<\/p>\r\n

    \"WordPress._Advanced_menu_item_options_4\"<\/a><\/p>\r\n

    CSS Classes<\/h3>\r\n

    CSS Classes<\/strong> option allows you to apply a CSS class to individual menu items and make the menu style editing process much easier.<\/p>\r\n

      \r\n
    1. \r\n

      Check the CSS Classes<\/strong> advanced property within Screen Options <\/strong>section.<\/p>\r\n<\/li>\r\n

    2. \r\n

      Open any menu item to add css class.<\/p>\r\n

      \"WordPress._Advanced_menu_item_options_5\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n

      Let’s add Font Awesome icon to one of the menu items. Please check following link: http:\/\/fortawesome.github.io\/Font-Awesome\/cheatsheet\/<\/a> to see the list of available icons. Select icon you would like to show on your site menu, copy its class.<\/p>\r\n

      \"WordPress._Advanced_menu_item_options_6\"<\/a><\/p>\r\n

      Enter selected css class name and save menu to apply the change. Refresh your site to see the icon.<\/p>\r\n

      \"WordPress._Advanced_menu_item_options_7\"<\/a><\/p>\r\n

      Color, font style, font size and other style changes can be done using CSS Classes <\/strong>option. Let’s change menu item color:<\/p>\r\n

        \r\n
      1. \r\n

        Enter your custom css class under CSS classes<\/strong> section, like we did earlier. You can enter any name into CSS classes<\/strong> box.<\/p>\r\n<\/li>\r\n

      2. \r\n

        Add css code for specifying your color at the end of “style.css”<\/em> right after:<\/p>\r\n

        @import url(\"main-style.css\");<\/pre>\r\n
        Note! Edit “style.css”<\/em> file of the child theme. Do not modify “main-style.css”<\/em>,  as you may lose all the changes you did to this file.<\/p>\r\n
        \"WordPress._Advanced_menu_item_options_8\"<\/a><\/p>\r\n<\/li>\r\n
      3. \r\n
        Check your site to see the color change.<\/p>\r\n<\/li>\r\n<\/ol>\r\n
        Link Relationship (XFN)<\/h3>\r\n
        Link Relationship (XFN)<\/strong> option allows the generation of XFN (XHTML Friends Network) attributes, so you can show how you are related to the authors of the site to which you are linking. This option is usually used for external links.<\/p>\r\n
          \r\n
        1. \r\n
          Tick the Link Relationship (XFN)<\/strong> property within Screen Options<\/strong> section.<\/p>\r\n<\/li>\r\n
        2. \r\n
          Expand specific item in the menu and specify the relationship in Link Relationship (XFN)<\/strong> field. Check the following link to learn about links relationship: http:\/\/codex.wordpress.org\/Defining_Relationships_with_XFN<\/a>. We have specified the link as nofollow<\/em>, please check the screenshot below:<\/p>\r\n
          \t\"WordPress._Advanced_menu_item_options_9\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n
          Description<\/h3>\r\n
          You can add the menu description. Menu item description will be displayed if the current theme supports it. <\/p>\r\n
            \r\n
          1. \r\n
            Check the Description<\/strong> advanced property within Screen Options<\/strong> section.<\/p>\r\n<\/li>\r\n
          2. \r\n
            Expand the menu item you would like to add description to. Enter your description under “Description” field as it is shown on the screenshot below:<\/p>\r\n
            \"WordPress._Advanced_menu_item_options_10\"<\/a><\/p>\r\n<\/li>\r\n<\/ol>\r\n
            Feel free to check the detailed video tutorial below:<\/p>\r\n
            WordPress. Advanced menu item options<\/a>\r\n<\/p>\r\n<\/p>\r\n
            <\/p>","protected":false},"excerpt":{"rendered":"
            This tutorial is going to show you how to work with the advanced menu item options<\/p>\n","protected":false},"author":55,"featured_media":38147,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[1249,571,1143,2405],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/36375"}],"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=36375"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/36375\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/38147"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=36375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=36375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=36375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}