منوی چسبان در المنتور – وحید گودینی- طراح و توسعه دهنده وب

Vahid Goudini

0 %
Vahid Goudini
Fullstack Developer
Ui/UX Designer
  • Residence:
    Tehran
  • Number:
    0353504860
  • Age:
    32
Digital Marketing
develop
Marketing
Web Design and Develop
campain plan
Marketing plan
server and security
Seo
  • Marketing strategy
  • Moderate
  • Google service
  • GIT knowledge / Api

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

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));
}
				
			
Posted in ولاگTags:
Write a comment