Sticky Menu In Elementor – وحید گودینی- طراح و توسعه دهنده وب

Vahid Goudini

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

Sticky Menu In Elementor

15 October 2021

Subscribe To My YouTube Channel For More Upcoming Videos

1. Edit Your Header Template in Elementor

In your WordPress dashboard, go to Templates → Theme Builder and click Edit With Elementor for your header template.

2. Perform Some Basic CSS Housekeeping

  • In the Layout tab, set the HTML Tag drop-down equal to header.
  • Also in the Layout tab, set the header’s Minimum Height equal to 70px.
  • Also in the Layout tab, set the header’s Minimum Height equal to 70px.
  • You can customize this later on. But start with 90px for now.
  • Then, go to the Advanced tab and set the header section’s CSS Classes equal to sticky-header.
  • Finally, open the image widget that contains your logo and go to the Advanced tab. Then, set your logo image’s CSS Classes field equal to logo:

3. Set Up Motion Effects to Make Your Header Stick

Open the settings for the section that contains your header. Then, go to the Advanced tab and open the Motion Effects settings:

  • Set the Sticky drop-down equal to Top.
  • Make sure that the Sticky On box only includes Desktop – you’ll need to delete the other devices.
  • Set the Effects Offset equal to 90.

4. Add Custom CSS Code

 open the settings for the header section and go to Advanced → Custom CSS. Copy below code

					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 ToturialTags:
Write a comment