برای مشاهده ویدیوهای جدید در کانال YouTube من عضو شوید
1- ساخت یک سربرگ منو در المنتور
از قسمت پیشخوان وردپرس روی Templates → Theme Builder کلیک کنید و سربرگ رانتخاب و گزینه Edit With Elementor کنید یا اگر سربرگی ندارید یکی طراحی کنید.
2- تنظیمات مربوط به ساختن منوی چسبان درالمنتور
- درقسمت Layout آیتم HTML Tag انتخاب کرده و از منوی کشوی گزینه header را انتخاب نمایید
- از قسمت Layout تنظیات ارتفاع را روی Minimum Height و مقدار 70px قرار دهید (70 پیکسل یا مقدار دلخواه)
- از قسمت Layout تنظیات ارتفاع را روی Minimum Height و مقدار 70px قرار دهید (70 پیکسل یا مقدار دلخواه)
- بعداً می توانید این مورد را سفارشی کنید. اما فعلاً با 90 پیکسل شروع کنید.
- ازقسمت تب Advanced گزینه CSS Classes را انتخاب کرده ومقدار sticky-header را قرار دهید.
- در ادامه لوگو خود را انتخاب کرده و از تب Advanced دراین قسمت کلاس CSS Classes مقدارlogo را تایپ کنید
3- تنظیمات مربوط به استایل css
تنظیمات قسمتی را که حاوی سرصفحه شماست باز کنید. سپس وارد Advanced شوید و وارد قسمت Motion Effects شوید
- از قسمت Sticky منوی کشویی را روی Top قرار دهید
- فعال بودن منوی چسبان را دردیوایس های مختلف انتخاب کنید
- افست افکت را روی 90 قرار دهید
4- کپی کد استایل از قسمت زیر
تنظیمات کلی css مربوط به سربرگ را باز کرده کد زیر را کپی کنید
header.sticky-header {
--header-height: 90px;
--opacity: 0.90;
--shrink-me: 0.80;
--sticky-background-color: #0e41e5;
--transition: .3s ease-in-out;
transition: background-color var(--transition),
background-image var(--transition),
backdrop-filter var(--transition),
opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
background-color: var(--sticky-background-color) !important;
background-image: none !important;
opacity: var(--opacity) !important;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
min-height: calc(var(--header-height) * var(--shrink-me))!important;
height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
padding-bottom: 10px !important;
padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
max-width: calc(100% * var(--shrink-me));
}