הוספת טקסט לתפריט ניווט נפתח במובייל של אלמנטור
נכתב ע"י יוחאי ירמיהו5 שאלות
תיאור קצר לשיעור: בשיעור זה נלמד להוסיף טקסט לתפריט ניווט נפתח באלמנטור (כפתור ספוילר/המבורגר) כאשר אנחנו משתמשים באפשרות של תפריט נפתח במובייל על רוחב מלא של כל העמוד.
אורך השיעור: 6:20 דקות
קורסים המכילים את השיעור וידאו:
תוכן השיעור:
כאשר אתם יוצרים כפתור ספוילר/המבורגר לפתיחת התפריט ניווט במובייל אלמנטור לא מאפשרים לנו להוסיף טקסט לכפתור ניווט ולא לכפתור סגירה. בשיעור זה נלמד כיצד להוסיף טקסט לתפריט נפתח על רוחב מלא באמצעות קוד CSS והקוד הזה יוצג רק בתפריט ניווט של הטלפון הנייד.
הוספת טקסט לכפתור ספוילר/המבורג בתפריט נפתח באלמנטור
במידה ואנחנו רוצים להוסיף טקסט לכפתור הנפתח שאנחנו יוצרים בתפריט העליון במובייל נוכל לעשות את זה על ידי הוספת קוד CSS מותאם שמאפשר לנו להוסיף את התוכן לתוך לכפתור של פתיחת התפריט ניווט.
באופן ברירת מחדל אלמנטור לא מאפשרים לנו להוסיף את הטקסט לתפריט הניווט ואם אתם רוצים להכניס תוכן לאזור הזה אז הדרך הקלה ביותר היא על ידי קוד CSS כפי שניתן לראות מתחת.
הדבר הראשון שנצטרך לעשות בשביל שזה יעבוד זה להוסיף Class עבור התפריט ניווט של אלמנטור. דיברנו על איך לעשות את זה גם בשיעור של הוספת Class ומרווחים באלמנטור.
ה-Class שאתם צריכים להוסיף זה ה-Class הבא top-header-nav וללא ההוספה הקוד הזה האפשרות הזאת לא תעבוד. עוד נקודה שחשוב לציין היא שהקוד הבא אמור לעבוד בצורה טובה באתרים בעברית ולא בטוח שזה יעבוד באתרים באנגלית.
אין לך הרשאות גישה לתוכן של העמוד
במידה ואתם מנסים להכניס את הקוד באתרים שנבנו בעברית והקוד מעל לא עובד לכם כמו שצריך אז אתם יכולים לנסות ולהכניס את הקוד הבא במקום הקוד שמופיע מעל אתם יכולים לשנות את התווית של after ל-before או לשנות את padding-right לאפשרות של padding-left.
ב-2 האפשרויות הקוד שיופיע הוא תפריט תחת האפשרות של content. אם נרצה אפשר לשנות את טקסט שמופיע שם לטקסטים אחרים גם כמו תפריט ניווט או כל דבר אחר שתרצו.
הצטרפו לקהילות המובילות של בוני האתרים בישראל
זה הזמן להצטרף לקהילה שלנו ולקבל סיוע ותמיכה בקבוצות המובילות בארץ לבוני אתרים בוורדפרס (-:
קורסים מקיפים ומומלצים ללימוד בניית אתרים
לבנות אתר ב-10 ימים
קורס מזורז שילמד אותך לבנות אתרים ב-10 ימים. נקודת כניסה מעולה לתחום של בניית אתרים במחיר משתלם.
- לבנות אתר ב-10 ימים 56 שיעורים שילמדו אותך הכל על בניית אתרים
- בונוס 1: לבנות אתר מתבנית מוכנה לאנשים עסוקים שלא רוצים להשקיע 10 ימים
- בונוס 2: גיבוי, שחזור, ותחזוקה לאתר איך לבצע גיבויים ולתחזק אתר ללא תקלות
- בונוס 3: אלמנטור קונטיינר (Container) איך ליצור תוכן באמצעות אלמנטור קונטיינר
- בונוס 4: אחסון אתרים ב-Cloudways אחסון אתרים על גבי חברות השרתים המובילות בעולם
- בונוס 5: קלאודפלייר + מייל עסקי בחינם איך להשתמש בקלאודפלייר + יצירת מייל עסקי בחינם
- בונוס 6: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 7: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק
- גישה לכל החיים
- תעודה הכשרה בסיום הלימודים (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 1076 סטודנטים לפניך (-:
מסלול וורדפרס Expert
למעלה מ-10 קורסים מלאים ומעל 700 שיעורים שילמדו אותך הכל על בניית אתרים ברמה הגבוהה ביותר בארץ.- בניית אתר ב-10 ימים איך לבנות אתר במהירות שיא
- וורדפרס Beginner לימוד בניית אתרים למתחילים – (2,250 ₪)
- וורדפרס Tool Kit הצעת מחיר + אפיון + צ'ק ליסט + התנהלות עם לקוחות
- וורדפרס Next Level מחיר 2,500 ₪
- וורדפרס SEO התאמת אתרים לגוגל – (750 ₪)
- : אלמנטור Ninja הקורס שיהפוך אותך לנינג'ה באלמנטור – (999 ₪)
- אלמנטור PRO + אנימציות יצירת אתרים מורכבים ואנימציה – (550 ₪)
- וורדפרס Rocket שיפור מהירות לאתר – (999 ₪)
- וורדפרס Security חיזוק אבטחה לאתר – (750 ₪)
- וורדפרס Global בניית אתרים דו לשוניים בכל השפות – (750 ₪)
- בונוס 1: גיבוי, שחזור, ותחזוקה לאתר תחזוקת אתרים ומניעת בעיות ותקלות
- בונוס 2: אנליטיקה ומעקב לאתר גוגל אנליטיקס, סרץ קונסול ויאנדקס מטריקה
- בונוס 3: איך לקבל יותר פניות מהאתר הוספת כפתורי יצירת קשר + שיפור המרות
- בונוס 4: קלאודפלייר + מייל עסקי בחינם שימוש בקלאודפלייר ויצירת מייל עסקי בחינם
- בונוס 5: התקנת אתר על המחשב איך להשתמש במחשב ולחסוך עלויות אחסון
- בונוס 6: Cloudways אחסון אתרים בחברות השרתים המובילות בעולם
- בונוס 7: לעבור אחסון ולהישאר בחיים איך להעביר אתר מאחסון אחד לאחר ללא תקלות
- בונוס 8: אופטימיזציה לתמונות איך להעלות תמונות שיעזרו לאתר להתקדם בגוגל
- בונוס 9: יסודות העיצוב לבוני אתרים כל מה שצריך לדעת כדי לעצב את האתר המושלם
- בונוס 10: זכויות יוצרים בדיגיטל איך להימנע מתביעה משפטית כאשר בונים אתר
- בונוס 11: 20 אלף בחודש מבניית אתרים איך למצוא לקוחות ולייצר הכנסה מבניית אתרים
- בונוס 12: משיחת מכירה לכסף בחשבון איך לשפר את התהליך מכירה ולסגור יותר עסקאות
- בונוס 13: התנהלות עם לקוחות + ניהול פרויקטים איך מתנהל פרויקט בניית אתרים כולל תחזוקה לאתר
- בונוס 14: יצירה וניהול של רשימות תפוצה ברב מסר איך ליצור סדרות מיילים ואוטומציות שיכניסו כסף על אוטומט
- 758 שיעורים למתחילים + למתקדמים
- תמיכה לשנה לשאלות בעמודי השיעורים
- גישה לקבוצת הפייסבוק של הקורס
- גישה לכל החיים
- תעודה הכשרה בסיום הקורס (קובץ PDF)
- גישה לעדכונים ושיעורים חדשים
- 100% החזר כספי ל-14 ימים
רכשו את הקורס 764 סטודנטים לפניך (-:
אם אהבתם את השיעור ואתם רוצים לשתף אותו ניתן לעשות זאת על ידי לחיצה על כפתורי השיתוף מתחת:
עוסק בתחום של פיתוח אתרים ועיצוב גרפי למעלה מ-15 שנה. נינג'ה מומחה לוורדפרס, מפתח תוספים ותבניות בהתאמה אישית והמרצה שלכם בקורס הדיגיטלי המקיף והמוביל בישראל ללימוד בניית אתרים בוורדפרס בצורה נכונה.
שאלות ותשובות לשיעור
5 שאלות
באסה, היכולת לשאול שאלות בשיעור פתוחה רק למשתמשים שרכשו את הקורס
היי יוחאי ותודה רבה על השיעורים
איך אפשר לשנות את הקוד כדי שבמקום מימין/שמאל הטקסט יופיע מעל/מתחת לתפריט הנפתח?
היי לנה,
זה קצת יותר מסובך להציג את זה למעלה או למטה.
ניסיתי ליצור פה קוד מאוד מהיר שאולי הוא עשוי לעזור (זה לפחות עבד בבדיקה המהירה שלי).
את יכולה לנסות ולשחק עם הערכים המספריים כדי לבצע שינויים שם. ואם את רוצה לשנות מיקום של לפני ואחרי את יכולה לשנות את המילה before אל המילה after.
ברגע שאת עושה את זה את גם תצטרכי לשנות את המיקום של התפריט הנפתח ככה שהוא יפתח במיקום נמוך יותר ממה שהוא מופיע שהכל בשורה אחרת (זה נעשה דרך ההגדרות של אלמנטור).
.top-header-nav .elementor-menu-toggle {
display: block;
width: 150px;
}
.top-header-nav .elementor-menu-toggle::before {
content: "תפריט נפתח";
position: relative;
width: 100%;
display: block;
bottom: initial;
font-weight: bold;
}
.top-header-nav .elementor-active::before {
content: "סגירה";
}
תודה רבה!
היי יוחאי
הוספתי את CSS Classes ולאחר מכן הוספתי את הקוד לפי הסבר ולא קורה כלל
יש לך רעיון?
היי עמית, בדקתי את זה עכשיו עם הגרסה הכי עדכנית של אלמנטור ונראה כאילו זה עובד בצורה טובה.
יכול להיות שעשית משהו לא טוב. תצלם ותשלח כאן אולי את המיקום שבו הכנסת את ה-class ואת המיקום שבו הכנסת את הקוד CSS ותשלח גם קישור לאתר אם אפשר כדי שנבין על מה מדובר.
(אם אתה שולח צילום מסך תשלח צילום של כל האזור כולל האזור עריכה של התפריט ולא רק של ההגדרות).