Menus

Menus

Knowledge Base > Picture Perfect > Menus

in Picture Perfect

Creating Menus

  1. Hover over “Appearance” in the left menu until a sub-menu appears
  2. Click “Menus” in the sub-menu
  3. If you do not have any menus enter a menu name
  4. Click create menu
  5. Use the checkboxes on the left side of the page to select menu items to add to a menu
  6. Click “Add to Menu”
  7. When you are done adding items, click “Save Menu”

Assigning Menus to Locations

  1. Hover over “Appearance” in the left menu until a sub-menu appears
  2. Click “Menus” in the sub-menu
  3. Click the “Manage Locations” tab at the top of the Menus page
  4. Select a menu to assign to your Main Menu or Off Canvas menu
  5. Click Save Changes
Picture Perfect uses a custom menu with icons in the Home Top widget area over the home background image. Instructions on how to set up this menu are located in the Picture Perfect – Home Page documentation

Adding Dividers and Labels

Note: Dividers and Labels are only applicable to the Main Menu

Dividers

On the Appearance > Menus page:

  1. Add a “Link” menu item
  2. Enter a # sign for the URL
  3. Add divider for the “Link Text” – the text will not be used
  4. Add a CSS Class named divider
  5. If you do not see the CSS Classes field:

    1. Click “Screen Options” in the upper right of the Menus page
    2. Tick the checkbox for CSS Classes
  6. Click Save Changes

Labels

On the Appearance > Menus page:

  1. Add a “Link” menu item
  2. Enter a # sign for the URL
  3. Add your label for the “Link Text”
  4. Add a CSS Class named label
  5. If you do not see the CSS Classes field:

    1. Click “Screen Options” in the upper right of the Menus page
    2. Tick the checkbox for CSS Classes
  6. Click Save Changes

Adding icons

Picture Perfect uses a custom menu of IDX pages, with icons, in the Off Canvas menu and the custom menu in the Home Top widget area. To set up those menus:

On the Appearance > Menus page:

  1. Click IDX Pages on the left and check boxes for the menu items to add, and click “Add to menu”
  2. Drag and Drop the menu items in the order you want
  3. Change the title if desired
  4. Add a CSS Class for any of the available Font Awesome icons. Icon classes begin with “fa-“. Icons used in the demo:
    • fa-search
    • fa-search-plus
    • fa-map-marker
    • fa-dashboard
    • fa-globe
    • fa-tag
    • fa-home
    • fa-envelope
  5. If you do not see the CSS Classes field:

    1. Click “Screen Options” in the upper right of the Menus page
    2. Tick the checkbox for CSS Classes
  6. Click Save Changes