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

اگه از طرح های تکراری خسته شدی، پیشنهاد میکنم حتما این هدر عمودی جذابو روی سایتت امتحان کنی💚

کدهای CSS بخش اصلی:

selector {
    width: 250px;
    overflow: auto;
    position: fixed;
    transition: all .3s ease !important;
    overflow-x: hidden;
    z-index: 1;
    -ms-overflow-style: none;
}

selector::-webkit-scrollbar {
    display: none;
}


.sidebar-toggle{
    cursor: pointer;
    transition: all .3s ease;
}

body.opening selector{
    width: 80px !important;
}

selector.logo {
    transition: all 0.3s ease;
}

body.opening selector .logo {
    display: none
}

selector .sidebar-toggle:hover {
    transform: translateX(2px);
}

body.opening selector .sidebar-toggle {
    transform: rotate(180deg);
    margin-right: 7px
  
}

body.opening selector .sidebar-toggle:hover {
    transform: rotate(180deg) translateX(2px);
}

body.opening selector .elementor-icon-list-items li a {
    padding: 8px !important;
    height: 46px;
}

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: 11px !important;
}

selector .elementor-icon-list-text {
    transition: all 0.3s ease;
}

body.opening selector .elementor-icon-list-text {
    opacity: 0;
    font-size: 0px;
}

selector .user {
    transition: all 0.3s ease;
    width: 100%;
}

body.opening selector .user {
    padding: 10px;
}

body.opening  selector .user img {
    transition: all 0.3s ease;
}

body.opening selector .nome {
    display: none;
    transition: all .3s ease;
    margin-left: 0px !important;
}

header + *,
[data-elementor-type="header"] + *,
footer,
[data-elementor-type="footer"]{
    margin-right: 250px;
    transition: all 0.3s ease !important;
}

body.opening header + *,
body.opening [data-elementor-type="header"] + *,
body.opening footer,
body.opening [data-elementor-type="footer"]{
    margin-right: 80px;
}

@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.3s ease !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 !important;
    }
    
    html, body{
        overflow-x: hidden;
    }

}


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

کدهای CSS فرم جستجو:

selector{
        outline: none !important;
}

کدهای CSS لیست آیکن:

selector .elementor-icon-list-item a {
      padding: 12px 12px !important;
      border-radius: 8px;
      transition: all .3s ease;
  }
  
 selector .elementor-icon-list-item:hover a {
      background: #1F3027;
  }

selector .elementor-icon-list-item:hover span,
  selector .elementor-icon-list-item:hover span i{
      color: #0BBC5C;
  }
  
   selector .elementor-icon-list-item.active a{
       background: #0BBC5C;
   }
   
    selector .elementor-icon-list-item.active span,
  selector .elementor-icon-list-item.active span i{
        color: #fff;
  }

  selector a:focus{
      outline: none;
  }


/*MOBILE*/

@media screen and (max-width: 767px){

selector .elementor-icon-list-item a {
      padding: 8px 7px !important;
  }
}

کدهای JS ویجت HTML:

<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)
        $('body').toggleClass('left')
    })

})

$(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(){
    
    if ( $(window).width() >= 768 ) {
        $('body').addClass('open')
        $('body').addClass('opening')
    }
    
    $('.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>