Full Screen Menu Elementor Pro Background Switch
DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
hello, I’m Kaycinho, The Digital Alchemist, and today, I’m going to show you how to create a transparent sticky vertical menu with Elementor Pro. WITHOUT any additional plugin.
Sticky Vertical Menu Elementor Pro Tutorial
First of all, let’s give credit where it’s due because this tutorial is based on the code from Ivan Grozdic.
This tutorial is video based (check above), but below you will find the code needed to complete it.
HTML Code
While editing your full screen menu (popup), add an HTML widget, and paste the following code:
<div class="hero-center-section">
<div class="left-text">menu1</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="img-wrap">
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZzMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbSUyRnMuY2Rwbi5pbyUyRjE0NjI4ODklMkZuYXR1cmUuanBnIiBkYXRhLXc9IjEiIGRhdGEtaD0iMSIgZGF0YS1iaXA9IiI+PC9zdmc+" data-spai="1" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero-center-section">
<div class="left-text">menu2</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="img-wrap">
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZzMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbSUyRnMuY2Rwbi5pbyUyRjE0NjI4ODklMkZ0cmF2ZWwuanBnIiBkYXRhLXc9IjEiIGRhdGEtaD0iMSIgZGF0YS1iaXA9IiI+PC9zdmc+" data-spai="1" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero-center-section">
<div class="left-text">menu3</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="img-wrap">
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZzMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbSUyRnMuY2Rwbi5pbyUyRjE0NjI4ODklMkZmYXNoaW9uLmpwZyIgZGF0YS13PSIxIiBkYXRhLWg9IjEiIGRhdGEtYmlwPSIiPjwvc3ZnPg==" data-spai="1" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero-center-section">
<div class="left-text">menu4</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="img-wrap">
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZzMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbSUyRnMuY2Rwbi5pbyUyRjE0NjI4ODklMkZhbmltYWxzLmpwZyIgZGF0YS13PSIxIiBkYXRhLWg9IjEiIGRhdGEtYmlwPSIiPjwvc3ZnPg==" data-spai="1" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="hero-center-section">
<div class="left-text">menu5</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="img-wrap">
<img decoding="async" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGRhdGEtdT0iaHR0cHMlM0ElMkYlMkZzMy11cy13ZXN0LTIuYW1hem9uYXdzLmNvbSUyRnMuY2Rwbi5pbyUyRjE0NjI4ODklMkZidXNpbmVzcy5qcGciIGRhdGEtdz0iMSIgZGF0YS1oPSIxIiBkYXRhLWJpcD0iIj48L3N2Zz4=" data-spai="1" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="section padding-top-bottom over-hide z-bigger">
<ul class="slide-buttons">
<li class="">
<a href="#0" class="hover-target" data-hover="menu1">menu1</a>
</li>
<li class="">
<a href="#0" class="hover-target" class="hover-target" data-hover="menu2">menu2</a>
</li>
<li class="">
<a href="#0" class="hover-target" data-hover="menu3">menu3</a>
</li>
<li class="">
<a href="#0" class="hover-target" data-hover="menu4">menu4</a>
</li>
<li class="">
<a href="#0" class="hover-target" data-hover="menu5">menu5</a>
</li>
</ul>
</div>
<!-- Page cursor
================================================== -->
<div class='cursor' id="cursor"></div>
<div class='cursor2' id="cursor2"></div>
<div class='cursor3' id="cursor3"></div>
Javascript Code
While editing your full screen menu (popup), add an HTML widget, and place it under the other HTML widget that contains html code.
Then paste the following code:
<script type="text/javascript">
(function($) { "use strict";
//Page cursors
document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) {
t.style.left = n.clientX + "px",
t.style.top = n.clientY + "px",
e.style.left = n.clientX + "px",
e.style.top = n.clientY + "px",
i.style.left = n.clientX + "px",
i.style.top = n.clientY + "px"
});
var t = document.getElementById("cursor"),
e = document.getElementById("cursor2"),
i = document.getElementById("cursor3");
function n(t) {
e.classList.add("hover"), i.classList.add("hover")
}
function s(t) {
e.classList.remove("hover"), i.classList.remove("hover")
}
s();
for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
o(r[a])
}
function o(t) {
t.addEventListener("mouseover", n), t.addEventListener("mouseout", s)
}
$(document).ready(function() {
/* Hero Case study images */
$('.slide-buttons li:nth-child(1)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(1)').addClass("show");
$('.slide-buttons li:nth-child(1)').addClass('active');
})
$('.slide-buttons li:nth-child(2)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(2)').addClass("show");
$('.slide-buttons li:nth-child(2)').addClass('active');
})
$('.slide-buttons li:nth-child(3)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(3)').addClass("show");
$('.slide-buttons li:nth-child(3)').addClass('active');
})
$('.slide-buttons li:nth-child(4)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(4)').addClass("show");
$('.slide-buttons li:nth-child(4)').addClass('active');
})
$('.slide-buttons li:nth-child(5)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(5)').addClass("show");
$('.slide-buttons li:nth-child(5)').addClass('active');
})
$('.slide-buttons li:nth-child(6)').on('mouseenter', function() {
$('.slide-buttons li.active').removeClass('active');
$('.hero-center-section.show').removeClass("show");
$('.hero-center-section:nth-child(6)').addClass("show");
$('.slide-buttons li:nth-child(6)').addClass('active');
})
$('.slide-buttons li:nth-child(1)').trigger('mouseenter')
});
})(jQuery);
</script>
Popup Settings Css
While editing your full screen menu popup with Elementor Pro:
- click on the gear icon (bottom left corner of the editor page) in order to edit the Popup Settings,
- then Advanced > Custom Css and paste the following code:
:root {
--white: #ffffff;
--black: #000000;
--dark-blue: #1f2029;
--dark-light: #424455;
--red: #da2c4d;
--yellow: #f8ab37;
--grey: #ecedf3;
}
/* #Primary
================================================== */
::selection {
color: var(--white);
background-color: var(--black);
}
::-moz-selection {
color: var(--white);
background-color: var(--black);
}
mark{
color: var(--white);
background-color: var(--black);
}
.color-yellow {
color: var(--yellow);
}
.size-18{
font-size: 18px;
}
.opacity-40{
opacity: 0.4;
}
.opacity-60{
opacity: 0.6;
}
.section {
position: relative;
width: 100%;
display: block;
z-index: 30 !important;
}
.over-hide {
overflow: hidden;
}
.hero-center-section{
position: fixed;
top: 50%;
left: 0;
width: 100%;
z-index: 10;
transform: translateY(-50%);
opacity: 0;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.hero-center-section.show{
opacity: 1;
}
.hero-center-section .left-text{
position: absolute;
top: -50%;
left: -20px;
height: 200%;
z-index: 1;
font-family: 'Poppins', sans-serif;
font-weight: 900;
text-align: center;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
font-size: 7vw;
line-height: 1;
color: rgba(200,200,200,.1);
background: linear-gradient(90deg, rgba(200,200,200,0), rgba(200,200,200,0.1));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.hero-center-section.show .left-text{
left: 0;
}
.z-bigger {
z-index: 30 !important;
}
.img-wrap {
position: relative;
width: 100%;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02);
display: block;
transform: scale(1.03);
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.img-wrap img {
width: 100%;
height: auto;
display: block;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
position: fixed;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events: none;
left: -100px;
top: 50%;
mix-blend-mode: difference;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
z-index: 9999999;
}
.cursor{
background-color: var(--white);
height: 0;
width: 0;
z-index: 9999999;
}
.cursor2,.cursor3{
height: 36px;
width: 36px;
z-index:99998;
-webkit-transition:all 0.3s ease-out;
transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
transform:scale(2) translateX(-25%) translateY(-25%);
border:none
}
.cursor2{
border: 2px solid var(--white);
box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
background: rgba(255,255,255,1);
box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}
/* #Menu
================================================== */
.slide-buttons{
position: relative;
padding: 0;
margin: 0 auto;
text-align: center;
width: 580px;
max-width: 100%;
padding-left: 20px;
padding-right: 20px;
list-style: none;
}
.slide-buttons li{
position: relative;
padding: 0;
margin: 0 auto;
text-align: center;
margin: 60px 0;
display: block;
list-style: none;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.slide-buttons li a{
position: relative;
display: inline-block;
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 100px;
line-height: 0.8;
text-transform: uppercase;
-webkit-text-stroke: 2px var(--white);
text-stroke: 2px var(--white);
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
color: transparent;
opacity: 0.5;
-webkit-transition: all 300ms linear;
transition: all 300ms linear;
}
.slide-buttons li.active a{
opacity: 1;
}
.slide-buttons li a:hover{
text-decoration: none;
}
.slide-buttons li a:focus,
.slide-buttons li a:active{
border: none;
outline: none;
box-shadow: none;
}
.slide-buttons li a::before {
position: absolute;
top: 0;
left: 0;
font-family: 'Poppins', sans-serif;
font-weight: 900;
font-size: 100px;
line-height: 0.8;
overflow: hidden;
text-transform: uppercase;
padding: 0;
max-height: 0;
-webkit-text-stroke: transparent;
text-stroke: transparent;
-webkit-text-fill-color: var(--white);
text-fill-color: var(--white);
color: var(--white);
content: attr(data-hover);
-webkit-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
transition: max-height 0.4s;
}
.slide-buttons li.active a::before,
.slide-buttons li a:active::before,
.slide-buttons li a:focus::before {
max-height: 100%;
}
/* #Media
================================================== */
@media (min-width: 1025px) { /* DESKTOP */
.hero-center-section.show .img-wrap{
transform: scale(1);
}
.padding-top-bottom {
padding: 90px 60px;
}
}
@media (min-width: 768px) and (max-width: 1024px) { /* TABLET */
.hero-center-section.show .img-wrap{
transform: scale(3);
}
.padding-top-bottom {
padding: 10px;
}
}
@media (max-width: 767px) { /* MOBILE */
.cursor,
.cursor2,
.cursor3{
display: none;
}
.hero-center-section .left-text{
display: none;
}
.slide-buttons li{
margin: 40px 0;
}
.slide-buttons li a{
font-size: 45px;
font-weight: 700;
}
.slide-buttons li a::before {
font-size: 45px;
font-weight: 700;
}
.hero-center-section.show .img-wrap{
transform: scale(4);
}
.padding-top-bottom {
padding: 40px 20px;
}
}
Your turn!
I hope this tutorial will help you create a slick looking full screen menu with Elementor Pro!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you anything!
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!
| 
