If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Featured templates

WordPress. Advanced menu item options

This tutorial is going to show you how to work with the advanced menu item options.

WordPress. Advanced menu item options

WordPress allows you to add additional settings to your site menu.

  1. To access the settings, log into your WordPress admin panel and go to the Appearance > Menus tab.

    WordPress._Advanced_menu_item_options_1

  2. To enable advanced options, click the Screen Options drop down in the top-right corner of your screen.

    WordPress._Advanced_menu_item_options_2

You will see: Link Target, CSS Classes, Link Relationship (XFN), and Description options.

WordPress._Advanced_menu_item_options_3

Link Target

This option controls whether the link opens in a new browser tab. Check the Link Target advanced property within Screen Options to enable this setting for the individual menu item.

Expand any menu item, check Open link in a new window/tab option.

WordPress._Advanced_menu_item_options_4

CSS Classes

CSS Classes option allows you to apply a CSS class to individual menu items and make the menu style editing process much easier.

  1. Check the CSS Classes advanced property within Screen Options section.

  2. Open any menu item to add css class.

    WordPress._Advanced_menu_item_options_5

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

WordPress._Advanced_menu_item_options_6

Enter selected css class name and save menu to apply the change. Refresh your site to see the icon.

WordPress._Advanced_menu_item_options_7

Color, font style, font size and other style changes can be done using CSS Classes option. Let’s change menu item color:

  1. Enter your custom css class under CSS classes section, like we did earlier. You can enter any name into CSS classes box.

  2. Add css code for specifying your color at the end of “style.css” right after:

    @import url("main-style.css");

    Note! Edit “style.css” file of the child theme. Do not modify “main-style.css”, as you may lose all the changes you did to this file.

    WordPress._Advanced_menu_item_options_8

  3. Check your site to see the color change.

Link Relationship (XFN)

Link Relationship (XFN) 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.

  1. Tick the Link Relationship (XFN) property within Screen Options section.

  2. Expand specific item in the menu and specify the relationship in Link Relationship (XFN) field. Check the following link to learn about links relationship: http://codex.wordpress.org/Defining_Relationships_with_XFN. We have specified the link as nofollow, please check the screenshot below:

    WordPress._Advanced_menu_item_options_9

Description

You can add the menu description. Menu item description will be displayed if the current theme supports it.

  1. Check the Description advanced property within Screen Options section.

  2. 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:

    WordPress._Advanced_menu_item_options_10

Feel free to check the detailed video tutorial below:

WordPress. Advanced menu item options