כדי להוסיף תפריט כפתורים, יש להוסיף את הקוד הבא תחת 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; }