המדריך הטכני: פתרון חפיפת Admin Bar בראש דביק ואנימציית מסגרת מסתובבת לאלמנטור

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

למה כדאי להשתמש באפקט ה-Border Rotate?

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

• נראות יוקרתית: שימוש ב-conic-gradient יוצר קרן אור דינמית שמקיפה את התפריט.

• שיפור חוויית המשתמש: התפריט הופך ל"צף" וברור יותר בזמן הגלישה.

• מקצועיות טכנית: הקוד כולל תיקוני באגים נפוצים כמו התנגשות עם סרגל הניהול (Admin Bar) של וורדפרס.

דגשים טכניים מרכזיים בקוד

1. פתרון בעיית סרגל הניהול (Admin Bar)

אחת הבעיות המטרידות ביותר בבניית תפריט דביק מקודד היא ההסתרה שלו על ידי סרגל הניהול של וורדפרס. הקוד הנוכחי כולל התניה חכמה המזהה אם המשתמש מחובר למערכת ומורידה את התפריט ב-32px (או 46px במובייל) כדי להבטיח תצוגה מושלמת גם בזמן עריכה.

2. אנימציה חלקה ללא "קיפאון"

שימוש בתכונה will-change: transform מאותת לדפדפן להתכונן לאנימציה מראש. זהו פרט קטן אך קריטי המונע ריצודים וקיפאון של האפקט המסתובב במכשירי דסקטופ חזקים.

3. הפרדה בין דסקטופ למובייל

מתוך מחשבה על ביצועים ודיוק, האפקט המורכב מתבטל אוטומטית במסכים קטנים (מתחת ל-1024px). במובייל, המטרה היא פונקציונליות מקסימלית ומהירות טעינה, ולכן שם נשמר המראה הנקי ללא האנימציות הכבדות.

הקוד המלא להטמעה ב-Custom CSS

כדי להטמיע את השינוי, הדבק את הקוד הבא במתקדם css מותאם אישית איפה ברקע של התפריט:

/* Sticky Header Luxury Effect - canfeydimyon.com */

/* הגדרות בסיסיות למעברים */
header.sticky-header {
    --sticky-bg-color: #632A2A;
    --transition-speed: 0.5s;
    transition: all var(--transition-speed) ease-in-out !important;
    position: relative;
    z-index: 9999 !important;
}

/* מצב דביק - עיצוב הציפה */
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-bg-color) !important;
    min-height: 100px !important;
    height: 100px !important;
    z-index: 9990 !important;
    position: fixed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    isolation: isolate !important; 
}

@media (min-width: 1025px) {
    header.sticky-header.elementor-sticky--effects {
        width: 94% !important;
        left: 3% !important;
        margin-top: 15px !important;
        border-radius: 50px !important;
        box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4) !important;
        overflow: hidden !important;
    }

    /* יצירת פס האור הרץ מסביב למסגרת */
    header.sticky-header.elementor-sticky--effects::before {
        content: "" !important;
        position: absolute !important;
        top: -200% !important;
        left: -50% !important;
        width: 200% !important; 
        height: 500% !important;
        background: conic-gradient(
            transparent 0%, 
            transparent 10%, 
            rgba(255, 255, 255, 0.7) 18%, 
            rgba(255, 240, 150, 0.8) 22%, 
            rgba(255, 192, 203, 0.7) 26%, 
            transparent 35%, 
            transparent 100%
        ) !important;
        animation: border-rotate-fixed 6s linear infinite !important;
        filter: blur(8px) !important; 
        z-index: -1 !important;
        pointer-events: none !important;
        will-change: transform !important;
    }

    header.sticky-header.elementor-sticky--effects::after {
        content: "" !important;
        position: absolute !important;
        inset: 3px !important; 
        background: var(--sticky-bg-color) !important;
        border-radius: 47px !important;
        z-index: -1 !important;
    }
}

/* אנימציית סיבוב המסגרת */
@keyframes border-rotate-fixed {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* תיקון התנגשות עם סרגל הניהול של וורדפרס */
body.admin-bar header.sticky-header.elementor-sticky--effects {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar header.sticky-header.elementor-sticky--effects {
        top: 46px !important;
    }
}

אפקט תמונה ראשית יוקרתית>>>