הגדרת מובייל טאץ' פרימיום (Touchy - תפריט מובייל אלגנטי)

על מנת להגדיר תפריט מובייל (Touchy) – יש לבצע את השלבים הבאים:

יש להעלות את התוסף "טאצ'י" – מובייל טאץ' פרימיום (קיים במאגרי החברה)
יש להגדיר את התוסף לפי השלבים הבאים תחת "עיצוב > התאמה אישית > Touchy"
1. תחת Misc יש לסמן את האפשרות השנייה (מיקום תפריט תחתון)
2. יש להגדיר רזולוציות תחת Misc > Hide at certain width / resolutions רזולוצייה מינימלית של 1240, מקסימלית של 5000
3. יש להחביא את תפריט האתר תחת Misc > Hide Theme Menu ע"י שימוש בסלקטור CSS:
```
.responsive-menu-toggle
```
יש להסתיר את אזור הלוגו העליון תחת "Logo & Logo Area" לסמן "Hide"
יש להסתיר את כפתור החיפוש – Search Button לבחור "Hide"
יש להגדיר את כפתור החיוג – Call Button יש להזין את הטלפון של הלקוח לחיוג ולהגדיר Custom Icon את האייקון הבא: (שפורפרת טלפון)
```
fa-phone
```
יש להגדיר את כפתור יצירת הקשר – תחת Email Button להזין (בעדיפות ראשונה) בשדה של Custom link, את הקישור לדף יצירת הקשר. או (בעדיפות שנייה) את אימייל הלקוח.
יש להגדיר את כפתור החזרה, תחת Back Button להגדיר Custom Icon את האייקון הבא: (התאמה לעברית)
```
fa-long-arrow-right
```
יש להגדיר את התפריט לפי עיצוב > תפריטים, ולסמן את האופציה של הצגת התפריט ב-Touchy.

יש לבצע התאמות CSS לעברית (RTL) לפי הקוד הבא:

/*RTL Fixes*/
.rtl .touchy-sub-arrow-inner {
 margin-left:0;
 margin-right: auto;
 left:0;
 right:auto;
}
.rtl .touchy-by-bonfire img {
 width: 35%;
 float: right;
}
.rtl .touchy-sub-arrow {
 right: auto;
 left: 5px;
}
.rtl .touchy-sub-arrow-inner {
 border-right: 1px solid #E7E7E7;
 border-left: 0;
}
.rtl .touchy-by-bonfire ul li.menu-item-has-children a {
 text-align: right;
}
.rtl .touchy-by-bonfire {
 right: initial !important;
 left: 0 !important;
 margin: 12px 0 0 10px;
}
.rtl .touchy-menu-active {
 left: 0 !important;
 right: auto !important;
}
.rtl .touchy-by-bonfire ul li a {
 float: right;
 width: initial;
 padding-right: 20px;
}
.rtl .touchy-menu-tooltip {
 left: 15px;
}
.rtl .touchy-by-bonfire .menu {
 /*Text for Menu Alignment*/
 text-align: right;
}
.rtl .touchy-wrapper .touchy-back-button:after, 
.rtl .touchy-wrapper .touchy-call-button:after, 
.rtl .touchy-wrapper .touchy-email-button:after, 
.rtl .touchy-wrapper .touchy-search-button:after {
 right:auto;
 left:0px;
}

ניתן לשנות את הצבעים והסגנון לפי הקוד CSS הבא:

/* Touchy adjustments: Colors, Look & Feel */
.touchy-menu-button, .touchy-back-button, .touchy-email-button, .touchy-call-button {
background:rgb(141, 198, 63) !important;
color:#fff !important;
opacity:1 !important;
}
.touchy-default-menu, .touchy-default-menu:before, .touchy-default-menu:after,.touchy-default-email-outer:before,.touchy-default-email-outer:after,.touchy-default-email-inner:before,.touchy-default-email-inner:after {
background-color:#fff !important;
}
.touchy-by-bonfire {
border-color: #f48120 !important;
}
.touchy-by-bonfire ul li a:hover {
color: #f48120 !important;
}
.touchy-by-bonfire ul li a {
 font-family: "Assistant", Arial, Tahoma, sans-serif;
font-size:17px;
}

כדי להוסיף כיתובים מתחת לאייקונים, יש להגדיר את הכיתובים תחת עיצוב > התאמה אישית > Touchy, ואז להשתמש בקוד CSS הבא לסגנון:

.touchy-wrapper .touchy-search-button::before, .touchy-wrapper .touchy-email-button::before, .touchy-wrapper .touchy-menu-button::before, .touchy-wrapper .touchy-call-button::before {
  font-size:14px;
  bottom:2px;
  font-family:Arial !important;
  letter-spacing:-0.1ex;
}
	.touchy-call-text-label-offset i, .touchy-email-text-label-offset i {
  top:-8px !important;
}

להגדרת כפתור חזרה לראש העמוד, יש להגדיר קישור ל-"#Wrapper", ולבחור אייקון של "fa-angle-up".

כדי לתקן את החץ של "Back", יש להשתמש בקוד ה-CSS הבא לתיקון:

.rtl .touchy-default-back {
    transform: rotate(180deg);
}

כדי לתקן אייקונים שאינם מופיעים, יש להוסיף את ה-Class של "fas", כך לדוגמא:

fas fa-phone

הגדרת מובייל טאץ' פרימיום (Touchy – תפריט מובייל אלגנטי)