התפריט הוא אחד הדברים הראשונים שאנשים רואים כשהם נכנסים לאתר.
עוד לפני שקוראים טקסט או לוחצים על כפתור העין ישר קולטת את ה- Header.
בדיוק בגלל זה, יותר ויותר אתרים מודרניים משתמשים בלוגו שממוקם באמצע התפריט.
זה יוצר מראה הרבה יותר מאוזן, יוקרתי ונקי, נותן תחושת פרימיום למותג, ומשדר סדר ודיוק כבר בשנייה הראשונה.
החדשות הטובות?
לא צריך בשביל זה תוסף מיוחד או מבנה מסובך. אפשר לעשות את זה באלמנטור בצורה יחסית פשוטה עם תגית HTML קטנה בתוך התפריט וקצת CSS.
למה בכלל לשים לוגו באמצע התפריט?
- יוצר Header סימטרי ומדויק יותר
- מושך את הפוקוס ישר למותג
- נראה הרבה יותר מודרני ויוקרתי
- משתלב מעולה עם עיצוב מינימליסטי
- נותן תחושה של אתר "גדול" ומלוטש יותר
ומה לגבי רספונסיביות?
במובייל, לוגו בתוך התפריט יכול ליצור רווחים מיותרים ולשבור את המבנה של ההמבורגר.
לכן הפתרון הכי נכון הוא:
- להציג את לוגו התפריט רק בדסקטופ
- להסתיר אותו בטאבלט ובמובייל
- להשתמש בלוגו רגיל דרך ווידג'ט נפרד של אלמנטור במובייל
ככה שומרים גם על עיצוב נקי וגם על חוויית משתמש טובה בכל המסכים.
בפתרון הזה השתמשתי בשילוב של:
- תגית HTML פשוטה ללוגו
- CSS קליל לשליטה מלאה
- התאמה רספונסיבית לטאבלט ומובייל
- הסתרה חכמה של הלוגו בתפריט במובייל
- לוגו חלופי דרך ווידג'ט של Elementor במובייל בלבד
איך עושים את זה בפועל?
- מוסיפים לתפריט פריט מסוג Custom Link
- בתוך הטקסט של הפריט מכניסים תגית HTML של תמונה במקום טקסט רגיל
- מוסיפים ללוגו Class ייעודי כדי לשלוט עליו עם CSS
- מגדירים גודל, יישור והתנהגות רספונסיבית דרך CSS
- מסתירים את הלוגו בטאבלט ובמובייל כדי שלא יישאר רווח ריק
- מוסיפים ווידג'ט Logo רגיל של Elementor שיוצג רק בטאבלט ובמובייל
- מקבלים Header נקי, מאוזן ורספונסיבי בכל המסכים
התוצאה הסופית:
Header נקי, מהיר, רספונסיבי ועם וייב הרבה יותר מקצועי ומדויק.
וכך התפריט נראה עם לוגו במרכז
העתיקו והדביקו את ה- CSS הבא בווידג'ט התפריט.
שימו לב לא לשכוח לתת תפריט לוגו בקישור מותאם אישית את הקלאס: menu-center-logo
/* =========================
לוגו באמצע התפריט
========================= */
selector .menu-center-logo {
display: block;
width: 8rem;
height: auto;
object-fit: contain;
}
/* יישור כל פריטי התפריט למרכז */
selector .elementor-nav-menu {
align-items: center;
}
/* ביטול מוחלט של כל אפקטי התפריט מהלוגו */
selector .menu-logo-item > a,
selector .menu-logo-item > a:hover,
selector .menu-logo-item > a:focus,
selector .menu-logo-item.current-menu-item > a,
selector .menu-logo-item.current_page_item > a {
background: transparent !important;
box-shadow: none !important;
color: inherit !important;
}
/* ביטול קו תחתון / חיווי / אנימציות */
selector .menu-logo-item > a::before,
selector .menu-logo-item > a::after {
display: none !important;
content: none !important;
}
/* ביטול אפקטי Hover של Elementor */
selector .menu-logo-item:hover,
selector .menu-logo-item:focus {
background: transparent !important;
}
/* =========================
דסקטופ
========================= */
@media only screen and (min-width: 1024px) {
selector .sub-arrow {
font-size: 70%;
margin: 5px 0 0 -3px;
}
}
/* =========================
טאבלט + מובייל
========================= */
@media only screen and (max-width: 1024px) {
/* הסתרת פריט הלוגו כולו */
selector .menu-logo-item {
display: none !important;
}
/* רוחב תפריט מובייל */
selector nav {
width: 300px !important;
left: unset !important;
right: -2px !important;
}
@media (max-width:767px) {
selector nav {
width: 200px !important;
left: unset !important;
right: -2px !important;
}
}
selector .sub-arrow {
font-size: 70%;
}
selector ul.sub-menu li:not(:last-child) {
border-color: red !important;
}
selector ul.sub-menu li:first-child a {
border-radius: 0 !important;
}
selector ul.sub-menu li.menu-item a {
padding: 8px 25px !important;
font-size: 16px !important;
}
selector ul.sub-menu li:last-child a {
border-radius: 0 !important;
}
}