הוספת אייקון לכל פריט בתפריט אלמנטור

בוידג’ט תפריט ניווט באלמנטור אין אפשרות לשים תמונה לכל קישור בתפריט הניווט.

אם את רוצה לבחור תמונה לכל פריט בתפריט או רק לחלק מהם, אפשר פשוט להוסיף קצת קוד CSS לוידג’ט תפריט הניווט.

השלבים להוספת תמונה לכל פריט בוידג’ט תפריט באלמנטור

  1. חשוב מאוד! לחצי על וידג’ט תפריט ניווט > תוכן > מצביע (או Pointer) > None. כלומר, את בוחרת שלא להוסיף אנימציה לכפתור במעבר עכבר.
  2. לחצי על וידג’ט תפריט ניווט > מתקדם > CSS מותאם אישית > הדביקי את הקוד הבא
selector .elementor-item:before{
    opacity: 1 !important;
    position: relative !important;
}
selector .menu-item:nth-child(1) .elementor-item:before{
    content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img1.svg') !important;
}

כעת יופיע לך בפריט הראשון בתפריט הניווט אייקון של בית. (האייקון מוצג מתוך אתר בו אני מקליטה קורסים)

שימי לב שבתוך הקוד יש מספר בסוגריים (בצבע סגול). המספר קובע לאיזה פריט בתפריט תתווסף התמונה

:nth-child(1)

בתוך הקוד מופיע גם URL לתמונה

url('https://chagitcourses.ussl.co.il/wp-content/uploads/img1.svg') 
  1. העלי לאתר את התמונות או האייקונים שברצונך להוסיף לתפריט הניווט, והחליפי את הקישור בקוד לקישור לתמונה שלך (להחליף את הקוד הנמצא בתוך ‘המרכאות’).
  2. הוסיפי לקוד תמונות נוספות לפני הקישור השני, הקישור השלישי וכן הלאה. את יכולה לשכפל את הקוד לפי הצורך, רק אל תשכחי לשנות את המספר בסוגריים
selector .menu-item:nth-child(2) .elementor-item:before{
    content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img2.svg') !important;
}
selector .menu-item:nth-child(3) .elementor-item:before{
    content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img3.svg') !important;
}
selector .menu-item:nth-child(4) .elementor-item:before{
    content: url('https://chagitcourses.ussl.co.il/wp-content/uploads/img4.svg') !important;
}
  1. כעת הוסיפי מרווח בפיקסלים בין התמונה לפריט בתפריט
selector .elementor-item{
    gap: 10px !important;
}

עכשיו יש לך אייקון משלך בכל פריט בתפריט הניווט של אלמנטור!

טיפ: את יכולה להוסיף אייקון רק לפריט מסויים בתפריט הניווט. פשוט כתבי בסוגריים את המספר הנכון שלו בסדר של התפריט.

תצליחי :)
חגית

2 תגובות

  1. יש אפשרות להוסיף איקון רק שהפריט בתפריט במצב פעיל?
    כלומר שאם אני עכשיו לדוגמא בעמוד אודות רק ליד אודות בתפריט יופיע איקון? וכך כל פריט פעיל? ובמצב רגיל או מעבר עכבר לא יהיו איקונים בכלל?
    תודה רבה!

כתיבת תגובה

עוד הדרכות על CSS

דילוג לתוכן