תפריט משני

נשמע שזה קשור לגובה תפריט, אפשר קישור?

תוריד את כל ה margin ששמת לתפריט (ראיתי כמה הגדרות CSS על התפריט)

ותגדיר את הגובה תפריט ל 100px וזה יעבוד כמו גדול

הו מעולה, בדיוק בשביל זה הוספנו בתוך ה A עוד SPAN כדי שיהיה אפשר לשחק עם העיצוב של דברים כמו אלו..

במקום הקוד הקודם שלך שנותן רקע ל A שים את הקוד הזה:

.sf-menu a:hover > span, .sf-menu li.active a > span, .sf-menu li.current-menu-item > a > span, .sf-menu .sfHover > a > span, .sf-menu .sfHover > li.current-menu-item > a > span, .sf-menu li.current-menu-ancestor > a > span, .mobile-menu a:hover > span, .mobile-menu li.current-menu-item > a > span {
    background-color: rgba(153, 153, 146, 0.5);
    border-radius: 15px;
    color: #FFF !important;
    padding: 5px 10px;
    overflow: hidden;
    transition: all 0.5s ease 0s;
}

פשוט הוספתי > span לכל הערכים ב CSS

הוספתי עכשיו גם padding: 5px 10px; כדי שיהיה לך את הריווח המתאים

אוקי, עכשיו 🙂

.sf-menu > li > a > span {
    padding: 5px 10px;
    transition: all 0.5s ease 0s;
}
.sf-menu > a:hover > span,
.sf-menu > li.active > a > span,
.sf-menu > li.current-menu-item > a > span,
.sf-menu .sfHover > a > span,
.sf-menu .sfHover > li.current-menu-item > a > span,
.sf-menu > li.current-menu-ancestor > a > span {
    background-color: rgba(153, 153, 146, 0.5);
    border-radius: 15px;
    color: #FFF !important;
    border-color: transparent !important;
}

ערכתי את הקוד, בדוק אותו עכשיו

גם הורדתי אותו מהתפריט מובייל

זה מוזר, זה אמור לעבוד

תוכל לתת לי גישה ללוח הבקרה?

אוקי, עשיתי לך שם קצת סדר בחלק הזה ב LIVE CSS

עובד עכשיו כמו גדול 🙂