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

מה הקוד עושה?

הקוד הזה שימושי כאשר אנחנו רוצים לקשר אל עוגנים (Anchors) באתר אלמנטור, אבל להימנע ממצבים שבהם תפריט הניווט או אלמנטים אחרים מסתירים את התוכן לאחר הלחיצה. הוא משמש כדי "להזיז" את המיקום שאליו מגיעים בלחיצה על העוגן, כך שיתחשב בגובה של האלמנטים שמעל התוכן, כמו תפריט קבוע (Sticky Header).

מתי תשתמשו בזה?

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

איך ליישם את הקוד?

שלב 1: הוספת ווידג'ט עוגן

1. היכנסו לעמוד שאתם עורכים באמצעות אלמנטור.
2. גררו את ווידג'ט "עוגן תפריט" (Menu Anchor) למיקום הרצוי בעמוד.
3. הגדירו שם עוגן ייחודי (לדוגמה: services, contact, או כל שם שמתאים).

שלב 2: הוספת הקוד לעוגנים

הקוד משפיע על כל העוגנים שנמצאים בעמוד. כדי להשתמש בו:

1. גשו ללשונית מתקדם > CSS מותאם באלמנטור (אפשר בלשונית הגדרות האתר או באזור ספציפי).
2. הדביקו את הקוד הבא:

.elementor-widget-menu-anchor {
    position: absolute;
    top: -180px;
}Code language: CSS (css)

שימו לב: אם גובה ה"Header" שלכם שונה, עדכנו את הערך ב- top לפי הצורך.

שלב 3: בדיקות והתאמות

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

@media (max-width: 768px) {
    .elementor-widget-menu-anchor {
        top: -100px; /* התאימו את הערך לגובה התפריט במובייל */
    }
}Code language: CSS (css)

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

טיפ חשוב

הוספת קוד גלובלי: אם יש לכם הרבה עוגנים באתר, תוכלו להוסיף את הקוד ל-CSS הגלובלי של האתר, במקום להוסיף לכל עמוד בנפרד.