By: Bonfire Themes
First off, thank you for purchasing the Touchy plugin! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!
Installing the plugin couldn't be simpler.
Once you've activated the plugin, the Touchy menubar will automatically appear on your site. Simply create a menu under Appearance > Menus as you normally would, and then attach it to the "Touchy, by Bonfire" location.
After installing the plugin, head to the WordPress Live Customizer under Appearance > Customize > Touchy Plugin. This where you'll find all the setup and customization options; enter your phone number and email address, change colors, icons, the function of buttons, etc. You'll find all options to be well categorized and explained in detail.
As of update 1.3, you can add a wide variety of icons to Touchy's drop-down menu. To do so, you simply need to insert the icon code infront of the actual menu item's Navigation Label.
<i class="fa-solid fa-anchor"></i>Anchor
Now check your site and you should see the menu item inside the dropdown menu. Now we'll explain what does what.
What you entered into the "Link Text" textfield were both the icon and the text label.
This part is the icon: <i class="fa-solid fa-anchor"></i>
...and this part is the text label: Anchor
To see the full range of icons available, head to the Font Awesome website here.
To use one of the icons available there, simply click on it and copy its HTML snippet into the WordPress menu builder as described above.
For example, let's say you want to link to your Twitter account.
In that case, the full Navigation Label can be:<i class="fa-brands fa-twitter"></i>Twitter
Or perhaps you'd like to link to page that lists your podcasts. In case, this would work:<i class="fa-solid fa-microphone-lines"></i>Podcasts
Or, as a final example, you wish to link to
a gallery page: <i class="fa-solid fa-camera-retro"></i>Image gallery
Starting with version 4.6, the Line Awesome icon set is also included in Touchy. Making use of it is very similar to Font Awesome. To see the icons available, simply head to https://icons8.com/line-awesome, click on the icon you'd like to use and copy-paste the code into your menu.
A few examples that you can paste into the menu editor:
<i class="las la-charging-station"></i>Charge
<i class="las la-paw"></i>Puppy
As of version 2.0 of Touchy, menu descriptions can be added to menu items. If you don't see the "Description" text area when editing a menu item, be sure to enable it by clicking the "Screen Options" tab in the top right corner (under Appearance > Menus) and then ticking "Description."
Afterwards, just enter your desired description into the menu item's "Description" text area.
Note: This replaces the "text" class method that was available in previous versions.
To highlight a menu item, simply add the "marker" class to the desired menu item's "CSS Classes" field. This can be done in the WordPress builder. If you don't see the "CSS Classes" field, enable it by opening the "Screen Options" tab in the top-right corner of the screen and making sure the "CSS Classes" checkbox is ticked.
As of version 2.0 of Touchy, there is an unstyled widget area included in the drop-down menu. As is expected for WordPress, you can add widgets under Apperance > Widgets and also in the Live Customizer under Appearance > Customize > Widgets.
The widget area can be used to insert social icons for example, given that you have a plugin that allows them to be entered via widgets. Or, if you know simple HTML and CSS, you can use the text widgets to add and style your own social icons. You can even embed a video (a showreel if you're an artist, perhaps), add a gallery, or even build yourself a fancy call-to-action button and link it to whereever you desire. The text widget accepts shortcodes, so the use of this area is really only limited by your creativity and cleverness; you can even add a slider if you have the necessary toolset in your installation. The only limiting factor to keep in mind is the width of the widget area, as it resides inside the drop-down menu.
Should you have a questions, then you can easily reach us through our CodeCanyon profile here (use the contact form located in the bottom-right corner of the page): http://codecanyon.net/user/BonfireThemes