ספרייה – Header

הדר רגיל לשכפול

אפקטים להדר

הדר פשוט - צבע רקע וצבע טקסט משתנים

  • מומלץ – לעשות שצבע התפריט יהיה שקוף אז ישתנה לצבע אחר בגלילה
  • אפשר לשנות גם את הצבע של הרקע והצבע של הטקסט בגלילה
  • לא לשכוח שלתפריט יש CSS CLASS בשם sticky-menu-items
  • בקוד אפשר לשחק עם זמן האנימציה
  • לא לשכוח להפעיל את Motion effects ולשים את ההדר על Sticky top – בנוסף לשים effects offset של 100
				
					.elementor-sticky--effects {
   background: #CD2151!important; /* change the background color here*/
}

.elementor-sticky--effects .sticky-menu-items ul li a /* change the menu text color here*/ {
   color: #0B0C10!important;
}

.elementor-sticky--effects, .sticky-menu-items ul li a {
  transition: .5s all ease-in-out;
}

הדר משתנה עם לוגו כהה ובהיר

  • אפשר לעשות 2 גרסאות צבעים של לוגו בגלילה – d-logo זה CSS CLASS ששמים ללוגו הכהה,  l-logo זה שמים ללוגו הבהיר
  • כל הקוד יושב על ה-section
  • אפשר לשנות גם את הצבע של הרקע והצבע של הטקסט בגלילה
  • לא לשכוח להפעיל את Motion effects ולשים את ההדר על Sticky top – בנוסף לשים effects offset של 100
  • לא לשכוח שלתפריט יש CSS CLASS בשם sticky-menu-items
				
					/* HIDES THE DARK LOGO */
.d-logo {
 display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
 display: inline-block;
}
.elementor-sticky--effects .l-logo {
 display: none;
}
/* CHANGES THE BACKGROUND MENU ON SCROLL */
.elementor-sticky--effects {
 background: #FFFFFF!important; /* edit here to change the background color for your sticky header*/
}
/* CHANGES THE TEXT COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
 color: #3A3F79!important; /* edit here to change your text color for sticky header */
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
 transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
 transition: .5s all ease-in-out;
}

הדר עם לוגו משנה גודל

  • מומלץ – לעשות שצבע התפריט יהיה שקוף אז ישתנה לצבע אחר בגלילה
  • אפשר לשנות גם את הצבע של הרקע והצבע של הטקסט בגלילה
  • לתמונה של הלוגו יש CSS CLASS בשם sticky-logo
  • בקוד אפשר לשחק עם הגודל שאליו הלוגו יתכווץ או יגדל, ואפשר לשחק עם זמן האנימציה
  • לא לשכוח להפעיל את Motion effects ולשים את ההדר על Sticky top – בנוסף לשים effects offset של 100
				
					/*-- SHRINKING LOGO --*/
/*-- New class when sticky is turned on 'elementor-sticky-effects' -*/
/*-- give the logo image a class called 'sticky-logo'  --*/

.elementor-sticky--effects {
   background: #CD2151!important; /* change the background color here*/
}

.elementor-sticky--effects .sticky-menu-items ul li a /* change the menu text color here*/ {
   color: #0B0C10!important;
}

.elementor-sticky--effects .sticky-logo img {
	width: 180px!important;/*-- edit the pixels to change to desired shrinking size --*/
}

.sticky-logo img {
	transition: .5s all ease-in-out;
}

@media screen and (max-width: 767px) {
    .elementor-sticky--effects .sticky-logo img {
	width: 90px!important;/*-- edit the pixels to change to desired shrinking size for mobile --*/
}
}

הדר משתנה

  • מומלץ – הלוגו העליון(header-2) אמור להיות עם צבע, והלוגו התחתון(header-1) אמור להיות שקוף
  • אפשר להגדיר את 2 הלוגואים שונה לגמרי לפי הצורך (לא חייבים את אותו העיצוב)
  •  להדר התחתון יש CSS CLASS בשם header-1, להדר העליון יש CSS CLASS בשם header-2
  • שים לב שיש הצללה על header-2
  • שים לב של header-1 יש Z-INDEX של 100
  • לא לשכוח להפעיל את Motion effects על header-2 ולשים את ההדר על Sticky top – בנוסף לשים effects offset של 100
  • אחרי שסיימת לעצב את 2 התפריטים ולשים את הקוד, תן להדר התחתון(header-1) MARGIN שלילי עד שיעלם בתוך ההדר העליון
  • את קוד ה-CSS צריך לשים ב-CUSTOMIZE ולא ב-SECTION
				
					
====== Option 1 Reveal Option =======

/* Slide In From The Top Option */

.header-2 {
 transform: translatey(-80px);
 -moz-transition: all .3s ease!important;
 -webkit-transition: all .3s ease!important;
 transition: all .3s ease!important;
}


.elementor-sticky--effects.header-2  {
 height: auto!important;
 transform: translatey(0px);
}

.elementor-sticky--effects.header-1 {
 display: none!important;
}

/* End Of Slide In From The Top Option */



====== Option 1 Fade In Option =======

/* Fade In Option */

.header-2 {
 opacity: 0;
 -moz-transition: opacity .25s ease-out!important;
  -webkit-transition: opacity .25s ease-out!important;
  transition: opacity .25s ease-out!important;
}


.elementor-sticky--effects.header-2  {
 opacity: 1!important;
}

/* End Of Fade In Option */