Create Icon Navigation Menu Bar like an App in Elementor

CSS Code Snippet on Menu Container:

selector{
    --background-color: #FFFFFF;
    --menu-active-color: #9B1FE8;
}
selector{
    width: max-content;
    transform: translateX(-50%);
    transition: none;
    background: var(--background-color);
}
selector:before{
    content: "" !important;
    display: none !important;
}
selector.transition{
    transition: all 0.3s ease-in-out;
}
selector.hidden{
    opacity: 0;
    pointer-events: none;
}
selector .elementor-widget-icon-box.stroke .elementor-icon{
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 0.08em;
  -webkit-text-stroke-color: currentColor;
}
selector .elementor-widget-icon-box .elementor-icon-box-icon a,
selector .elementor-widget-icon-box .elementor-icon-box-icon span{
    padding-bottom: 9px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -15px 0 0;
    position: relative;
    z-index: 1;
    transform: translateY(35px);
    transition: none;
}
selector.transition .elementor-widget-icon-box .elementor-icon-box-icon a,
selector.transition .elementor-widget-icon-box .elementor-icon-box-icon span{
    transition: all 0.3s ease-in-out;
}
selector .elementor-widget-icon-box.active .elementor-icon-box-icon a,
selector .elementor-widget-icon-box.active .elementor-icon-box-icon span{
    transform: translateY(0);
}
selector .elementor-widget-icon-box .elementor-icon-box-icon i,
selector .elementor-widget-icon-box .elementor-icon-box-icon svg{
    transition: none;
}
selector.transition .elementor-widget-icon-box .elementor-icon-box-icon i,
selector.transition .elementor-widget-icon-box .elementor-icon-box-icon svg{
    transition: all 0.3s ease-in-out;
}
selector .elementor-widget-icon-box.active .elementor-icon-box-icon i{
    color: var(--menu-active-color);
}
selector .elementor-widget-icon-box.active .elementor-icon-box-icon svg{
    fill: var(--menu-active-color);
}
selector .elementor-icon-box-content{
    width: 125%;
    transform: translate(-50%,8px);
    position: relative;
    left: 50%;
    opacity: 0; 
    z-index: -1; 
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    pointer-events: none;
}
selector.transition .elementor-icon-box-content{
    transition: all 0.3s ease-in-out;
}
selector .elementor-widget-icon-box.active .elementor-icon-box-content{
    opacity: 1;
    z-index: 2;
    transform: translate(-50%,0px);
    pointer-events: initial;
}
selector .elementor-icon-box-title a,
selector .elementor-icon-box-title span{
    background: var(--menu-active-color);
    padding: 5px 8px;
    border-radius: 10px;
    display: table;
}
selector a,
selector a:active,
selector a:focus{
    outline: none;
}
selector:not(.v2) .elementor-icon-box-title{
    transform: none !important;
}
selector .elementor-widget-html{
    display: none;
}
@media (max-width: 767px){
selector{
    width: calc(100% + 2px);
    justify-content: center;
}
}



/* Code for version 2 */
selector.v2 .elementor-icon-box-wrapper{
    display: flex;
    flex-direction: column;
}
selector.v2 .elementor-icon-box-content{
    order: -1;
}
selector.v2 .elementor-icon-box-icon a{
    padding: 0;
    margin: 0;
}
selector.v2 .elementor-widget-divider{
    display: none;
}
selector.v2 .elementor-widget-icon-box .elementor-icon-box-icon a,
selector.v2 .elementor-widget-icon-box .elementor-icon-box-icon span{
    padding: 30px 0 5px;
    margin: -44px 0 0;
    transform: translateY(0);
}
selector.v2 .elementor-widget-icon-box.active .elementor-icon-box-content {
    transform: translate(-50%,-20px);
}
selector.v2 .elementor-icon-box-title{
    border: 5px solid var(--background-color);
    border-radius: 17px;
    position: relative;
    box-shadow: 0 -15px 30px 0 rgba(0, 0, 0, 0.1);
}
selector.v2 .elementor-icon-box-title:before,
selector.v2 .elementor-icon-box-title:after{
    content: "";
    position: absolute;
    bottom: 9px;
    width: 13px;
    height: 13px;
    background: transparent;
    border-radius: 50%;
    z-index: -1;
}
selector.v2 .elementor-icon-box-title:before{
    left: -18px;
    box-shadow: 7px 7px var(--background-color);
}
selector.v2 .elementor-icon-box-title:after{
    right: -18px;
    box-shadow: -7px 7px var(--background-color);
}
selector.v2 .elementor-icon-box-content {
    align-items: flex-end;
    width: 200px;
}
selector.v2 .elementor-icon-box-wrapper{
    position: relative;
}
selector.v2 .elementor-icon-box-wrapper:before{
    content: "";
    position: absolute;
    top: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 3;
    left: 50%;
    background: var(--menu-active-color);
    transform: translate(-50%,35px);
    pointer-events: none;
    opacity: 0;
    transition: none;
}
selector.v2 .elementor-widget-icon-box.active .elementor-icon-box-wrapper:before{
    opacity: 1;
    transform: translate(-50%,0);
}
selector.transition.v2 .elementor-icon-box-wrapper:before{
    transition: all 0.3s ease-in-out;
}
selector.v2 .elementor-icon-box-icon{
    position: relative;
}
selector.v2 .elementor-icon-box-icon:before,
selector.v2 .elementor-icon-box-icon:after{
    content: "";
    position: absolute;
    top: -27px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    z-index: 3;
    background: transparent;
    transform: translate(-50%,35px);
    pointer-events: none;
    opacity: 0;
    transition: none;
}
selector.v2 .elementor-icon-box-icon:before{
    box-shadow: 2px -2px var(--menu-active-color);
    left: calc(50% - 7px);
}
selector.v2 .elementor-icon-box-icon:after{
    box-shadow: -2px -2px var(--menu-active-color);
    left: calc(50% + 7px);
}

selector.v2 .elementor-widget-icon-box.active .elementor-icon-box-icon:before,
selector.v2 .elementor-widget-icon-box.active .elementor-icon-box-icon:after{
    opacity: 1;
    transform: translate(-50%,0);
}
selector.transition.v2 .elementor-icon-box-icon:before,
selector.transition.v2 .elementor-icon-box-icon:after{
    transition: all 0.3s ease-in-out;
}

@media (max-width: 767px){
selector.v2{
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
}
}


/* Code for version 3 */
selector.v3{
    --default-text-color: #000;
    --active-icon-color: #fff;
}
selector.v3{
    padding-bottom: 3px;
}
selector.v3 .elementor-icon-box-content{
    opacity: 1;
    z-index: 1;
}
selector.v3 .elementor-icon-box-title a,
selector.v3 .elementor-icon-box-title span{
    background: none;
    color: var(--default-text-color);
}
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-title a,
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-title span{
    color: var(--menu-active-color);
}
selector.v3 .elementor-widget-icon-box .elementor-icon-box-icon a,
selector.v3 .elementor-widget-icon-box .elementor-icon-box-icon span{
    padding-bottom: 32px;
    margin-top: -19px;
}
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-icon a,
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-icon span{
    transform: translateY(16px);
}
selector.v3 .elementor-icon-box-content{
    transform: translate(-50%,0px);
}
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-content{
    transform: translate(-50%,-3px);
}
selector.v3 .elementor-widget-divider .elementor-widget-container:before{
    content: '';
    position: absolute;
    background: var(--menu-active-color);
    border-radius: 100%;
    top: 5px;
    left: 5px;
    height: calc(100% - 5px*2);
    width: calc(100% - 5px*2);
}
selector.v3 .elementor-widget-divider{
    top: -24px;
}
selector.v3 .elementor-widget-divider:before {
    top: -6px;
    left: -24px;
}
selector.v3 .elementor-widget-divider:after{
    z-index: -1;
    top: -6px;
    right: -24px;
}
selector.v3 .elementor-widget-icon-box.active .elementor-icon-box-icon i{
    color: var(--active-icon-color);
}
@media (max-width: 767px){
selector.v3{
    padding-left: 10px;
    padding-right: 10px;
}
}

JavaScript Code Snippet for the Navigation Menu:

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

var $ = jQuery,
    clickLock = false,
    currentIndexes = [],
    movingAnimations = [],
    bottomOffset = 200,
    hash = true


// Align the circle to the center of the icon

function getCenter(el){
    return el.position().left + el.width()/2
}


// Move the circle

function moveCircle(parent, el){
    var centerDiff = getCenter(el) - getCenter(parent.find('.elementor-widget-icon-box').eq(0))
        leftOffset = parent.find('.elementor-widget-icon-box').eq(0).offset().left - parent.offset().left

    parent.find('.elementor-widget-divider').css('transform', 'translateX(' + (centerDiff+leftOffset) + 'px)')
}


// Make the icon highlighted

function setActive(menu, index, i){
    menu.addClass('bubbling')
    movingAnimations[i] = true
    setTimeout(function(){
        if(movingAnimations[i]){ menu.addClass('bubble') }
    },50)
    menu.find('.elementor-widget-icon-box').removeClass('active')
    menu.find('.elementor-widget-icon-box').eq(index).addClass('active')
    moveCircle(menu, menu.find('.elementor-widget-icon-box').eq(index))
}


// Remove highlighted if needed

function removeActive(menu, i){
    movingAnimations[i] = false
    menu.removeClass('bubbling bubble')
    menu.find('.elementor-widget-icon-box').removeClass('active')
}

$(document).ready(function(){
    
$('.icon-menu').each(function(i){
    
var $this = $(this)
    
currentIndexes.push(-1)
movingAnimations.push(false)

// Hover Effect

$this.find('.elementor-widget-icon-box').on('mousemove mouseenter', function(){
    setActive($this, $(this).index(), i)
})


// Back to current item on mouse leave

$this.on('mouseleave', function(){
    if(currentIndexes[i] == -1){
        removeActive($this, i)
    }else{
        setActive($this, currentIndexes[i])
    }
})


// Click Effect

$this.find('.elementor-widget-icon-box').on('click', function(e){
    
    if( !hash ){
        var link = $(this).find('a').attr('href')
        if( link == '' || link[0] == '#' ){ return }
    }

    setActive($this, $(this).index(), i)
    currentIndexes[i] = $(this).index()
    clickLock = true
    setTimeout(function(){
        clickLock = false
    },1500)
})

})
})

function removeSlash(str){
    return str.replace(/^\/+|\/+$/g, '')
}

function getPath(url){
    return removeSlash((new URL(url, location.protocol+'//'+location.hostname)).pathname)
}

$(window).on('load', function(){

$('.icon-menu').each(function(i){
    
var $this = $(this)

$this.find('.elementor-widget-icon-box').each(function(index){
    
    
    // Add # in case of empty link
    
    var span1 = $(this).find('span.elementor-icon'),
    span2 = $(this).find('.elementor-icon-box-title span')
            
    
    if( span1.length ){
        span1.replaceWith($('<a class="elementor-icon elementor-animation-" href="#">' + span1.html() + '</a>'))
    }
    if( span2.length ){
        span2.replaceWith($('<a href="#">' + span2.html() + '</a>'))
    }
    
    
    // Hightlight icon in case of page URL
    
    var link = $(this).find('a').eq(0).attr('href')
    if(link){
        if(link[0] != '#'){
            hash = false
            if(getPath(link) == removeSlash(location.pathname)){
                setActive($this, index, i)
                currentIndexes[i] = index
            }
        }
    }
})


// Avoid initial animation

setTimeout(function(){
    $this.addClass('transition')  
},400)

})
})


// Title overflow fixing for v2

$(window).on('load resize', function(){

$('.icon-menu').each(function(i){
    
var $this = $(this)

$this.find('.elementor-widget-icon-box').each(function(index){
    
    if($this.hasClass('v2')){
        
        var offset = 20,
        title = $(this).find('.elementor-icon-box-title'),
        titleLeft = title.offset().left,
        menuLeft = $this.offset().left,
        titleRight = titleLeft + title.outerWidth(),
        menuRight = menuLeft + $this.outerWidth(),
        translateLeft = titleLeft - menuLeft,
        translateRight = menuRight - titleRight
        
        if($(window).width() < 768){
            offset = 4
        }
        
        // Right fix
        
        if(translateRight < offset){
            title.css('transform', 'translateX(' + (translateRight-offset) + 'px)')
        }
        
        // Left fix
        
        if(translateLeft < offset){
            title.css('transform', 'translateX(' + (offset - translateLeft) + 'px)')
        }
    }
})

})
})

var delay = 100

$(window).on('load scroll resize', function(e){

setTimeout(function(){

var topIds = [],
    selector = $('[data-elementor-type="wp-page"] > *:not(.icon-menu)')

selector.each(function(){
    if($(window).scrollTop() + $(window).height() - 350 > $(this).offset().top){
        topIds.push($(this).attr('id'))
    }
})

topIds = topIds.filter(element => element !== undefined)

$('.icon-menu').each(function(i){
    
    var $this = $(this),
        menuIndex
        
    // Hide menu near window bottom
    
    if( $('body').height() > $(window).height()+bottomOffset+100 ){
        if($('body').height() < $(window).scrollTop()+$(window).height()+bottomOffset){
            $this.addClass('hidden')
        }else{
            $this.removeClass('hidden')
        }
    }
    
    
    // Auto hightlight icon on scroll, load and resize
        
    if( !hash || clickLock ) {
        if( currentIndexes[i] != -1 && e.type == 'resize'){
            moveCircle($this, $this.find('.elementor-widget-icon-box').eq(currentIndexes[i]))
        }
        return
    }
    
    topIds.forEach(function(id, index){
        if( menuIndex!=undefined && menuIndex > -1 ) return
        var menuId = topIds[topIds.length - 1 - index]
        menuIndex = $this.find('[href="#'+ menuId +'"]').closest('.elementor-widget-icon-box').index()
        currentIndexes[i] = menuIndex
    })
    
    if( menuIndex==undefined || menuIndex == -1 ){
        currentIndexes[i] = -1
        removeActive($(this), i)
    }else{
        setActive($(this), menuIndex, i)
    }
    
})
delay = 0
},delay)
})

</script>

CSS Code Snippet for Divider Widget:

.icon-menu .elementor-widget-divider{
    transition: none;
}
.icon-menu.transition .elementor-widget-divider{
    transition: margin-top 0.3s ease-in-out, opacity 0.1s ease-in-out;
}
.icon-menu .elementor-widget-divider{
    opacity: 0;
    margin-top: 20px;
}
.icon-menu.bubbling .elementor-widget-divider{
    opacity: 1;
    margin-top: 0px;
}
.icon-menu.bubble .elementor-widget-divider{
    transition: all 0.3s ease-in-out, opacity 0.1s ease-in-out;
}
selector .elementor-widget-container{
    background: var(--background-color);
}
selector:before{
    content: "";
    position: absolute;
    top: 4px;
    left: -29px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow: 15px 18px var(--background-color);
}
selector:after{
    content: "";
    position: absolute;
    top: 4px;
    right: -29px;
    width: 30px;
    height: 30px;
    background: transparent;
    border-radius: 50%;
    box-shadow: -15px 18px var(--background-color);
}
Share Post:
Related Article

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running.

Copyright © 2025 Blessed Channel. All Rights Reserved

Join My Newsletter

Get expert tips, handy tools, and helpful tutorials delivered straight to your inbox absolutely free.

NewsLetter Form

Your privacy is important to me. Rest assured, your email address will remain completely confidential and will not be shared with any third party 

No Thanks