התאמות נפוצות ושינויים לסרגל העליון

מהו הסרגל העליון?

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

התאמות לסרגל הפעולה (Action bar)

שינוי גובה כללי של סרגל הפעולה (Action bar):

#Action_bar .social li a i {
 font-size:30px;
 line-height:40px;
}
#Header_wrapper div#Top_bar {
 top:50px !important;
}

אייקונים של מדיה חברתית – נמצאים תחת BeTheme Options > Social (יש לקבל את הקישורים המעודכנים מהלקוח)

צמצום / שינוי המרווחים בין האייקונים (מדיה חברתית):

#Action_bar .social li a i:before {
 margin:0px !important;
}

הקטנת / שינוי גובה המרווחים (עליון+תחתון) של האייקונים בסוג תפריט "Classic":

.header-classic #Action_bar ul.social {
 padding:8px 0;
}

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

התאמות לוגו

הגדרות הלוגו (וגם הלוגו הדביק – אופציונלי) – נמצאות תחת BeTheme Options > Global > Logo.

יש להגדיר את הגובה של הלוגו ואת המרווחים (עליון+תחתון).

הגדלת הלוגו בתפריט הדביק:

#Top_bar.is-sticky #logo img.logo-sticky {
 max-height:50px;
}

הזזת הלוגו למטה:

  #Top_bar #logo img.logo-main {
 top:30px;
 position:relative;
}

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

התאמות לתפריט

הבחירה של סוג התפריט תחת BeTheme Options > Header & Subheader > Layout תהיה בדרך כלל Classic, שזה תפריט רגיל עם מבנה של Sticky Menu אלגנטי ומעולה.

לעיתים נרצה לבחור מבנה אחר, כך לדוגמא:

Fixed – כאשר הלקוח לא רוצה Sticky Menu צר, אלא בגובה מלא
Stack – כאשר התפריט פשוט לא נכנס וצריך לשים את הלוגו מעליו
Transparent – כאשר התפריט הוא שקוף ללא פס
Simple – כאשר זה תפריט מודרני עם 3 פסים במקום תפריט עליון
Split Menu – כאשר העיצוב דורש תפריט מפוצל עם לוגו במרכז

פס סימון המקום ופסי הפרדה בין פריטי התפריט

עיבוי פס סימון המקום / הזזת פס סימון המקום + שינויי רוחב, ללא שינוי לתפריט הדביק:

#Top_bar:not(.is-sticky) .menu > li > a:after {
 height: 10px;
 bottom: -10px !important; /*מתחת לקו*/
 bottom: 0px !important; /*מעל לקו*/
/* אופציה, שינוי הרוחב, התזוזה משמאל תמיד חצי מהרוחב סה"כ */ 
/* width:50%; */
/* left:25%; */
}

הסרת הפס העליון של התפריט הראשי:

#Top_bar .menu > li a:after {
 height:0px;
}
/*שמירה בתפריט הדביק - אופציונלי*/
#Top_bar.is-sticky .menu > li a:after {
 height:4px;
}

הסתרת הפסים המפרידים בין פריטי התפריט:

#Top_bar .menu > li > a span {
 border:none !important;
}

סגנון ומרווחים בתפריט

הפיכת התפריט ל-All Caps

#Top_bar #menu > ul > li > a > span {
 text-transform:uppercase;
}

שינוי המרווח בין פריטי התפריט (ניתן להתאמה)

#Top_bar div.menu > li > a span:not(.description) {
 padding: 0 18px;
}

התאמת גובה שורה:

#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) {
 line-height:35px;
}

התאמת מרווח עליון:

#Top_bar:not(.is-sticky) .menu_wrapper {
 margin-top:15px;
}

הזזות ומיקום התפריט

התאמה נפוצה אחת היא הרחבת הסרגל העליון לרוחב מלא – כאשר התפריט הוא ארוך או נפתח לכל הרוחב, זו הדרך לממש זאת (ולא בהזזת תפריט / לוגו, עובד פחות טוב רספונסיבית).

הזזת התפריט למטה (ללא שינוי לתפריט הדביק)

#Top_bar:not(.is-sticky) .menu_wrapper {
 position:relative;
 top:34px !important;
}

תפריט ימינה / שמאלה

#Top_bar .menu_wrapper {
 float:left !important;
 /*float:right !important; אופציה*/
}

הוצאת התפריט הראשי החוצה / תפריט ראשי מרחף (להשתמש בזהירות ובמקרי קצה בלבד):

#Top_bar .menu_wrapper {
 position:absolute;
 right:-250px;
 top:25px;
}

תת-תפריטים

הרחבת רוחב תת-תפריט:

#Top_bar .menu li ul li {
 width:250px;
}
/*הזזת תת-תפריט*/
.rtl #Top_bar .menu li ul:not(.mfn-megamenu) li ul {
 right:250px;
 left:auto;
}
#Top_bar .menu li ul:not(.mfn-megamenu) li ul {
 left:250px;
}

צמצום רוחב תת-תפריט: (רוחב שני)

#Top_bar .menu li.shorter ul li {
 width:180px;
}
/*הזזת תת-תפריט*/
#Top_bar .menu li.shorter ul:not(.mfn-megamenu) li ul {
 right:180px;
}

מסגרת לפריט נבחר (כולל עיגול פינות):

#Top_bar #menu > ul > li.hover > a,
#Top_bar #menu > ul > li.current-menu-parent > a {
 border-radius:30px !important;
 background-color:#ffd821 !important;
 color:#2e4c9a !important;
}

אייקון חיפוש + כפתור קריאה לפעולה

נמצאים תחת Theme Options > Header & Subheader > Extras

ניתן להסתיר את הצל של האזור עם הקוד הבא:

#Top_bar .top_bar_right:before {
 display:none;
}

התפריט הדביק

הגדלת הלוגו בתפריט הדביק:

#Top_bar.is-sticky #logo img.logo-sticky {
 max-height:50px;
}

התאמות לתפריט הדביק:

#Top_bar.is-sticky .menu_wrapper {
 right:-150px;
 top:0px;
}
#Top_bar.is-sticky .menu_wrapper ul li a {
 font-size:20px;
}