Скачать или смотреть How to Fix Sticky Header Overlaps Menu Anchor for Desktop / Tablet / Mobile in Elementor WordPress

In this wordpress tutorial for beginners you will learn how to fix sticky header overlap menu anchors for desktop, tablet and mobile layout using custom css in elementor / elementor pro website page builder in wordpress website. So you can add custom css for each device screen and you can set height and margin in pixel (px) according to your requirement for different screen view in website.
So in custom css you can set height margin for mobile, tablet landscape / portrait and desktop view or screen and also you can set css media query screen sizes for maximum and min width according to your requirement.

*** Use Custom CSS:

body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
position: relative;
z-index: -1;
}
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
content: "";
display: block;
height: 100px;
margin: -100px 0 0;
visibility: hidden;
pointer-events: none;
}
@media screen and (max-width: 880px) and (min-width: 681px) {
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
height: 200px !Important;
margin: -200px 0 0 !Important;
}
}
@media screen and (max-width: 680px) and (min-width: 100px) {
body:not(.elementor-editor-active) .elementor-menu-anchor:before {
height: 100px !Important;
margin: -100px 0 0 !Important;
}
}

#header #sticky #menu #anchor #device #desktop #mobile #tablet #elementor #elementorpro #wordpress