איך להפוך את התפריט של אלמנטור לדביק

(נכתב במקור בפייסבוק ע”י אלון אברג’יל)

1. יוצרים header ומעצבים אותו כראות עינכם באלמנטור

2. מוסיפים גודל ל body:
body{
min-height:800px;
}
3. מוסיפים את הקוד הזה בשביל שההידר יהיה דביק: (רלוונטי לתבנית OceanWP, בתבניות אחרות תצטרכו לשנות את שם הקלאס/תגית)

.ehf-header header {
z-index: 30;
position: fixed;
width: 100%;
top: 0;
}

4. בנוסף – ניצור class שבו יהיו השינויים שנרצה שיקרו לאחר הגלילה

.changebackground{
background-color:white;
transition: background 500ms ease-out;
}
למשל הדוגמא הזו תגרום לכך שאחרי הגלילה הרקע ישתנה לצבע לבן, בצורה עדינה ונעימה לעין) תוכלו להוסיף שם מה שתרצו שיקרה (הסתדרת הלוגו, שינוי גובה ועוד)

ואת הסקריפט הבא מוסיפים כ js
jQuery(window).ready(function() {
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll > 100) {
jQuery(“header”).addClass(“changebackground”);
} else {
jQuery(“header”).removeClass(“changebackground”);
}
});
});

הקוד בעצם יגרום לכך שה class הנוסף שיצרנו (בסעיף 4) יתווסף ל header , וכמובן אפשר בצורה הזו לדרוס את הגודל הקודם שלו, צבע וכו’)

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

יתכן שבקוד jquery תצטרכו להחליף את “header” אם ההידר שלכם בנוי באמצעות תג אחר, או אם אתם רוצים תשנו את שם ה class (בדוגמא שלי זה changebackground.

הקוד ב CodePen- לקריאה והעתקה נוחה

https://codepen.io/alon121/pen/rpeKYP

ברוב התבניות תצטרך להוסיף גם margin-top לתגית body, הערך שלו בפיקסלים שווה לגובה התפריט