הוספת תפריט משני עליון / מרחף / כפתורים

כדי להוסיף תפריט כפתורים, יש להוסיף את הקוד הבא תחת BeTheme Options > Header & Subheader > Extras > Banner, כדי שיהיה אפשר לקשור את התנהגות הכפתורים לתפריט הדביק.

<a class="icon2 main" href="https://www.nogawiderschool.co.il/%d7%97%d7%a0%d7%95%d7%aa/"><img src="https://www.nogawiderschool.co.il/wp-content/uploads/2020/09/Group-1-1.png" /><p>חנות</p></a>
<a class="icon3 main" href="https://www.nogawiderschool.co.il/%d7%90%d7%99%d7%a8%d7%95%d7%a2%d7%99%d7%9d/"><img src="https://www.nogawiderschool.co.il/wp-content/uploads/2020/09/Group-2-1.png" /><p>אירועים</p></a>
<a class="icon1 main" href="https://www.nogawiderschool.co.il/login"><img src="https://www.nogawiderschool.co.il/wp-content/uploads/2020/09/Group-3-1.png" /><p>התחבר/י</p></a>

כאשר יש לעדכן את הקישורים ואת האייקונים בהתאמה.

ניתן לסגנן את תפריט הכפתורים עם הקוד הבא: (כולל התאמה לתפריט הדביק, ללא כותרות)

#Top_bar .banner_wrapper a {
 position:fixed;
 right:20px;
 top:42px;
 color:#2e425f !important;
}
#Top_bar .banner_wrapper a:hover {
 color:#f1614c !important;
}
#Top_bar .banner_wrapper a.icon2 img {
 max-width:60px !important;
 margin-right:24px;
}
#Top_bar .banner_wrapper {
 display:block !important;
}
#Top_bar.is-sticky .banner_wrapper a {
 right:20px;
 top:5px;
}
#Top_bar.is-sticky .banner_wrapper p {
 display:none;
}
#Top_bar.is-sticky .banner_wrapper a.icon2 img {
 max-width:50px !important;
 margin-right:12px;
}

ו-CSS להתאמה לסלולר:

div#Top_bar .logo #logo {
 margin-top:4px;
 height:100px;
}
div#Top_bar .banner_wrapper a {
 z-index:999;
 top:130px;
 right:10px;
}
div#Top_bar.is-sticky .banner_wrapper a { 
 right:0px;
}

שיטה קודמת / ארכיון

כדי להוסיף תפריט משני (מרחף, משני או כפתורים), יש להיכנס לעיצוב > תפריטים, ושם ליצור תפריט חדש בשם "תפריט משני" או "תפריט כפתורים", ולשבץ אותו תחת "Social Menu Top".

יש להפעיל את ה-Action Bar כדי שהתפריט יופיע. אפשר למחוק את הדברים הנוספים שמוגדרים ב-Action Bar אם האתר תוכנן בלעדיהם.

כדי לשים את התפריט מתחת לתפריט הראשי (ללא Action Bar) ניתן להשתמש בקוד הבא: (כולל שינוי פונטים, רקע, עיגול לשונית)

#social-menu {
 position:absolute;
 top:128px !important;
 z-index:3;
 background-color:black;
 padding-right:50px;
 padding-left:50px;
 border:#f4d82b 4px solid !important;
 border-radius:0px 0px 25px 25px;
}
#social-menu a {
 color:#f4d82b !important;
 font-weight:600 !important;
 padding-right:8px;
 padding-left:8px;
}
#Top_bar {
 position:relative !important;
 top:0px;
 z-index:30;
}

כדי להכין תפריט כפתורים, יש להכין תפריט שבו לכל כפתור יש Class (לדוגמא text1, text2, text3) ויש לשבץ אייקונים בתפריט, הטקסטים המתאימים ישובצו באמצעות ה-CSS.

ניתן להשתמש בקוד הבא: (כולל בניית כפתורים, ריחוף לימין, התאמות תפריט דביק)

#Action_bar .container {
 max-width:100% !important;
}
#Top_bar {
 z-index:30;
 top:0px !important;
}
#Action_bar {
 z-index:999;
}
#Action_bar .social-menu li, #Action_bar .social-menu li:last-child {
 margin-right:14px;
}
#social-menu {
 position:absolute;
 top:20px !important;
 right:-20px !important;
 padding-right:50px;
 padding-left:50px;
}
#social-menu a:hover {
 background-color:#d7c9b2;
}
#social-menu a {
 background-color:#a29176;
 padding:14px;
 border-radius:30px;
}
#social-menu a:hover, #social-menu a {
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out;
}
#social-menu a i {
 font-size:24px;
}
#social-menu a i:before {
 margin:0px !important;
 position:relative;
 top:1px;
}
.text1,.text2,.text3 {
 position:relative;
}
.text1:after {
 content:"שיחת וידאו";
 position:absolute;
 top:42px;
 width:100px;
 right:-10px;
}
.text2:after {
 content:"ווצאפ";
 position:absolute;
 top:42px;
 width:100px;
 right:14px;
}
.text3:after {
 content:"פתיחת תיק";
 position:absolute;
 top:42px;
 width:100px;
 right:-4px;
}