Menus

118 0 0 October 18, 2020

Table of contents

  1. Supported Menu Locations:
    1. Primary Menu
    2. Top Menu (right and left)
      1. Final Display
    3. Footer Menu
    4. Social Menu

The LSX theme is configured to support four separate menu locations. The locations of your menus can be changed in two areas:

  1. Via the “Menus” option in the Customizer
  • When logged into the back-end of your website, navigate down to the “Appearance” menu item in your Dashboard
  • Hover over the “Appearance” menu item and select the “Customize” option from the sub-item menu
  • Select “Menus” from the Customizer menu
  • Select the “Menu Locations” option (view the Customizer docs for more information)

2. Via the “Appearance” option on your WordPress Dashboard

Screen Shot 2016-10-18 at 10.49.37 (1)
  • When logged into the back-end of your website, navigate down to the “Appearance” menu item in your Dashboard
  • Hover over the “Appearance” item and select “Menus” from the drop-down
  • At the top of this page, you will see two tabs – “Edit Menus” and “Manage Locations”
  • Select the “Manage Locations” tab
  • Selecting the “Manage with Live Preview” option will redirect you to the Menu Location options in your Customizer, as described in option one

Here you will select the display location of your pre-made menus from the following options:

Supported Menu Locations:

Primary Menu

The primary menu location is set in the default primary navigation area in the header. This menu location is primarily allocated the menu which includes the most important navigation options on your websites such as your blog and contact page

Top Menu (right and left)

The Top Menu is located above your main navigation header when active, this menu location creates a small banner area above the header to house the menu that has been allocated to this location.

You can easily add your contact information and Call to Action buttons to this menu using the built-in LSX classes available.

Adding Top Menu Items:

  • When logged in the back-end of your website, navigate down to the “Appearance” menu item in your Dashboard
  • Hover over the “Appearance” item and select “Menus” from the dropdown
  • In the right corner of the menus settings page, you will see an option labelled “Screen Options”
  • Selecting this will activate a drop-down window of checkboxes
  • Make sure the “CSS classes” option is selected
  • Once this is complete, close the options window by re-selecting the “Screen Options” tab in the right-hand corner
  • Next, scroll down the page until you see an option called “Select a menu to edit” underneath the “Edit Menus” settings tab
  • Select the dropdown and choose “Top Menu” from the list of your menus

The following functionality content is available via the LSX classes:

Google Maps Link

Screen Shot 2017-01-17 at 3.45.16 PM
  • To add your Google Maps link, first navigate to google maps in a new tab – https://www.google.co.za/maps/
  • Type in the address of the location you wish to link to
  • When google maps has pinpointed this location, copy the URL of the webpage from your search bar
  • Then, navigate back to your menus settings
  • In the “Top Menu” editing section select the option to create a “Custom Link” from the menu options displayed on the left
  • Paste the Google Maps URL into the field labelled “URL”
  • In the “Navigation Label” field write the content you wish to be displayed on the menu, such as “View Map”
  • When complete select “Add to Menu”
  • Once the Map custom field is added to the Top Menu, select it so its options menu drops down
  • Here you will see the option to add “CSS Classes (optional)”
  • In this field, add the word “map” all in lower case
  • When this is complete, save the menu and navigate to the frontend to view your custom LSX class at work

Email

Screen Shot 2017-01-17 at 4.06.35 PM 1
  • Navigate to your “Top Menu” editing page from Dashboard >> Appearance >> Menus
  • Select the option to create a “Custom Link” from the menu options displayed on the left
  • Add the phrase “mailto:” followed by your desired email address in the field labelled “URL” eg: mailto:support@lsdev.biz
  • In the “Navigation Label” field write the content you wish to be displayed on the menu, such as a repeat of your email address
  • When complete select “Add to Menu”
  • Once the Email custom field is added to the Top Menu, select it so its options menu drops down
  • Here you will see the option to add “CSS Classes (optional)”
  • In this field, add the word “email” all in lower case
  • When this is complete, save the menu and navigate to the frontend to view your custom email link in your top menu

Phone 

Screen Shot 2017-01-17 at 3.55.51 PM
  • Navigate to your “Top Menu” editing page from Dashboard >> Appearance >> Menus
  • Select the option to create a “Custom Link” from the menu options displayed on the left
  • Add the phrase “tel:” followed by your desired email address in the field labelled “URL” eg: tel:+27214489843
  • In the “Navigation Label” field write the content you wish to be displayed on the menu, such as a repeat of your number
  • When complete select “Add to Menu”
  • Once the Phone custom field is added to the Top Menu, select it so its options menu drops down
  • Here you will see the option to add “CSS Classes (optional)”
  • In this field, add the word “tel” all in lower case
  • When this is complete, save the menu and navigate to the frontend to view your custom phone link

Call to Action

Screen Shot 2017-01-17 at 3.56.05 PM

The call to action usually would link to your contact page or perhaps your main product page

  • Navigate to your “Top Menu” editing page from Dashboard >> Appearance >> Menus
  • Select the option to create a “Page” from the menu options displayed on the left
  • Select the page you wish to link to as your CTA eg: Contacts Page
  • In the “Navigation Label” field write the content you wish to be displayed on the menu, such as “Contact Us” or “Book Now”
  • When complete select “Add to Menu”
  • Once the page is added to the Top Menu, select it so its options menu drops down
  • Here you will see the option to add “CSS Classes (optional)”
  • In this field, enter “cta” all in lower case
  • When this is complete, save the menu and navigate to the frontend to view your Call to Action top menu item

Final Display

To easily style this top menu using your customizer, be sure to purchase the LSX Site Customizer Extension

The footer menu location allows you to display a menu in the footer of your website. This menu location is in the same area as the social menu location, but does not provide the same functionality when adding a menu of social media links

Social Menu

The social menu is located in the footer alongside the footer menu location. If the footer menu is not active, then the social menu will take up the same location as the footer menu.

If you select the Social menu location as the area for your Social Menu (menu of social media links), the footer will display the icons for those social media platforms instead of regular text.

Eg: A social menu is set to display links to Facebook, Twitter and Youtube Accounts.

When it is added to the footer menu location, it will display the icons for those three accounts and not just the titles “Facebook | Twitter | Youtube”

Read more on WordPress’s menus functionality on the WordPress codex.

Tags:

Page Templates

Buttons