Vahid Goudini

Business Development

Software Developer

Data Scientist

Project Manager

Blog Post

منوی چسبان در المنتور

21 October 2021 ولاگ
منوی چسبان در المنتور

برای مشاهده ویدیوهای جدید در کانال 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));
}
				
			
Tags:
Write a comment