Elementor Vertical Header with Sidebar Navigation Menu in WordPress

 

 

CSS code snippet on Main Section:

:root{
    --width: 250px;
    --narrow-width: 80px;
}

selector{
    width: var(--width);
    overflow: auto;
    position: fixed;
    transition: all 0.3s ease-in-out !important;
    overflow-x: hidden;
    z-index: 1;
    -ms-overflow-style: none;
    scrollbar-width: none
}
selector::-webkit-scrollbar{
    display: none;
}

.sidebar-toggle{
    cursor: pointer;
}

body.opening selector{
    width: var(--narrow-width) !important;
}
body.opening selector .elementor-inner-section .elementor-widget-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
}
selector .logo{
    transition: all 0.3s ease-in-out;
}
body.opening selector .logo{
    opacity: 0;
}
body.open selector .logo{
    display: none;
}
body.opening selector .sidebar-toggle{
    right: 26px;
}
selector .elementor-widget-search-form form{
    position: relative;
}
selector .elementor-widget-search-form form:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}
body.opening selector .elementor-widget-search-form form:before{
    z-index: 1;
}
body.opening selector .elementor-search-form__icon{
    padding-left: 14px !important;
}
selector .elementor-icon-list-text{
    transition: all 0.3s ease-in-out;
}
body.opening selector .elementor-icon-list-text{
    opacity: 0;
}

selector .elementor-widget-image-box{
    transition: all 0.3s ease-in-out;
}
body.opening selector .elementor-widget-image-box{
    opacity: 0;
}
selector .user{
    transition: all 0.3s ease-in-out;
}
body.opening selector .user .elementor-widget-wrap{
    padding-left: 20px !important;
    padding-right: 20px !important;
}
body.opening  selector .user img {
    width: 40px;
    transition: all 0.3s ease-in-out;
}

header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
    margin-left: var(--width);
    transition: all 0.3s ease-in-out !important;
}
body.opening header + *,
body.opening [data-elementor-type="header"] + *,
body.opening footer,
body.opening [data-elementor-type="footer"]{
    margin-left: var(--narrow-width);
}

@media (max-width: 1024px){
header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
    margin-left: var(--narrow-width);
    transform: translateX(calc(var(--width) - var(--narrow-width)));
    transition: all 0.6s ease-in-out !important;
}
body.opening header + *,
body.opening [data-elementor-type="header"] + *,
body.opening footer,
body.opening [data-elementor-type="footer"]{
    transform: translateX(0);
    transition: all 0.3s ease-in-out !important;
}
html, body{
    overflow-x: hidden;
}
}

@media (max-width: 767px){
selector{
    height: 100vh;
}
body.left selector{
    transform: translateX(calc(-1*var(--width)));   
}
header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
    margin-left: 0;
    transform: translateX(var(--width));
    transition: all 0.3s ease-in-out !important;
}
body.left header + *,
body.left [data-elementor-type="header"] + *,
body.left footer,
body.left [data-elementor-type="footer"]{
    transform: translateX(0);
}
}

.site-content footer,
.site-content header + *{
    margin: 0 !important;
    transform: none !important;
}

 

CSS code snippet on Toggle Icon:

selector{
    --gap: 0.25em;
    --weight: 0.05em;
    --width: 0.8em;
}
selector .elementor-icon{
    position: relative;
}
selector i:before,
selector i:after,
selector .elementor-icon:after{
    content: "";
    height: var(--weight);
    width: var(--width);
    position: absolute;
    background: currentColor;
    top: 50%;
    left: 50%;
    transform: translate(-50%,calc(-50% + var(--gap)));
}
selector i:after{
    transform: translate(-50%,calc(-50% - var(--gap)));
}
selector .elementor-icon:after{
    transform: translate(-50%,-50%);
}

 

CSS code snippet on Search Form:

selector .elementor-search-form__icon{
    opacity: 1;
}

 

CSS code snippet on Icon List:

selector{
    --radius: 8px;
    
}
selector .elementor-icon-list-icon{
  color: currentColor;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: currentColor;
  text-align: center;
}
selector .elementor-icon-list-item.active .elementor-icon-list-icon,
selector .elementor-icon-list-item:hover .elementor-icon-list-icon{
    -webkit-text-stroke-width: 1px;
}
selector .elementor-icon-list-item a{
    padding: 13px 18px !important;
    border-radius: var(--radius);
}
selector .elementor-icon-list-item.active a,
selector .elementor-icon-list-item:hover a{
    background: #fff;
}
selector .elementor-icon-list-item.active span,
selector .elementor-icon-list-item:hover span,
selector .elementor-icon-list-item.active span i,
selector .elementor-icon-list-item:hover span i{
    color: #000;
}
selector .elementor-icon-list-text{
    min-width: var(--width);
}
selector a:focus{
    outline: none;
}

JavaScript code snippet for Toggle functionality:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

var $ = jQuery,
    clickLock = false

$(document).ready(function(){

$('.sidebar-toggle').on('click', function(){
    
    if( $(window).width() < 768 ){
        $('body').toggleClass('left')
    }else{
        if( $('body').hasClass('open') ){
            $('body').removeClass('open')
            setTimeout(function(){
            $('body').removeClass('opening')        
            },300)  
        }else{
            $('body').addClass('opening')
            setTimeout(function(){
            $('body').addClass('open')        
            },300)    
        }
    }
})

$('.navigation .elementor-icon-list-item').on('click', function(){
    $('.navigation .elementor-icon-list-item').removeClass('active')
    $(this).addClass('active')
    clickLock = true
    setTimeout(function(){
        clickLock = false
    },500)
})

})

$(window).on('load resize', function(){
    if( $(window).width() < 768 ){
        $('body').removeClass('open opening')
        $('body').addClass('left')
    }else if( $(window).width() < 1025 ){
        $('body').addClass('open opening')
    }else{
        $('body').removeClass('open opening')
    }
})

var hash = true

$(window).on('load', function(){
    $('.elementor-icon-list-item a').each(function(){
        if( $(this).attr('href') == location.protocol+'//'+location.host+location.pathname ){
            hash = false
            $(this).parent().addClass('active')
        }
    })
})

$(window).on('load scroll', function(){
    
    if( !hash || clickLock ) return
    
    var ids = [],
        id
    
    $('.elementor-top-section').each(function(){
        if($(window).scrollTop() + $(window).height() - 350 > $(this).offset().top){
            ids.push($(this).attr('id'))
        }
    })
    
    ids = ids.filter(element => {
      return element !== undefined
    })
    
    id = ids[ids.length - 1]
    
    $('.elementor-icon-list-item').removeClass('active')
    $('[href="#'+id+'"]').parent().addClass('active')
})

$('body').on('click', function(e){
    
if(!$(e.target).closest('.elementor-location-header').length && !$(e.target).hasClass('elementor-location-header') ){
    
    if( $(window).width() < 768 ){
        $('body').addClass('left')
    }else if( $(window).width() < 1025 ){
        $('body').addClass('open opening')
    }
}
    
})
</script>

 

CSS code snippet on 2nd Section:

selector{
    height: 0;
}