I have this markup for my menu items. I would like to use either svg or background image as hover and active state as animated. This is my codepen.

Codepen

I still can’t find the arch to land in the middle of every menu item. I have also tried to change this link to suit my needs.

But still can’t take it to the center.

Ideally, I want to use the svg file and activate the arc path. But no example can be found.

Anyone can help me with my original code and eliminate repetitive backgrounds while maintaining the line, or point me in any direction from where I can start would be greatly appreciated!

Code below:

jQuery(function($){

    $('ul.menu-nav li').each(function(i) {
        
        var wt= $(this).width();
        var offset = $(this).offset();
        var rt = ($('ul.menu-nav').width() - ($(this).offset().left + $(this).outerWidth()));

        console.log(wt);
        //console.log(offset.left);
        console.log(rt);

        $(this).attr('data-width', wt);
        $(this).attr('data-rel', rt);
    });

        $( 'ul.menu-nav li' ).on( {
            mouseenter : function(e){
                var attachment = $( this ).attr( 'data-rel' );
                //var dwt = $( this ).attr( 'data-width' );
                //var distance = ($(attachment) + 10) + "px";
                //var parent = $( this ).attr( 'data-rel' );
                
                //$( 'div#' + attachment).addClass('active').siblings().removeClass('active');
                //$( this ).addClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', -attachment);
                 e.stopPropagation();
            },
            
            mouseleave : function(e) {
                var attachment = $( this ).attr( 'id' );
                //var parent = $( this ).attr( 'data-rel' );
                
                
                //$( this ).removeClass('active');
                $( '.cp-line .cp-line-inner').css('background-position', 'center');
                //$( '.sub-menu').slideUp();
                 e.stopPropagation();
            }
       });

       /*$( 'ul.menu-nav li a' ).on( {
            mousedown : function(e){
                var url = $( this ).attr( 'href' );
                
                $( 'div' + url).addClass('active').siblings().removeClass('active');
                $( this ).parent().addClass('active').siblings().removeClass('active');
                //$( '.cp-line .cp-line-inner').css('background-position', -attachment);
                $('div' + url).fadeOut(function() {
                    // finished
                });
                e.stopPropagation();
            }
        });*/
});
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10001;
    transition: all 0.3s ease 0.3s;
}

.inner-header {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    align-items: center;
}

.drawer-menu {
    width:50%;
}

.inner-menu {
    position:relative;
    padding:0 40px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
}

ul.menu-nav li {

}

ul.menu-nav li a {

}

li#starting-point {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    opacity:0;
}

.site-branding {
    width: 50%;
    text-align: right;
    padding: 0 40px;
}

.site-branding a img {
    max-width: 320px;
}

ul.menu-nav {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    justify-content:space-between;
  margin:0;
  padding:0;
  list-style:none;
}

.cp-line {
    width: 100%;
    height: 50px;
    overflow:hidden;
    margin: 0 auto;
    position:relative;
}


.cp-line-inner {
    width:100%;
    height:100%;
    border-bottom:1px solid;
  background-image:url('https://sp-gd.com/commonplace/wp-content/themes/spxcommonplace/assets/line.svg');
  background-position:center;
  background-size:contain;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="masthead" class="site-header">
        <div class="inner-header">

            <div class="drawer-menu">
                <div class="inner-menu">
                    <ul class="menu-nav">
                        <li><a href="#work" data-bg="<?php the_field('background_colour', 10); ?>">Work</a></li>
                        <li><a href="#interesting" data-bg="<?php the_field('background_colour', 12); ?>">Interesting</a></li>
                        <li><a href="#useful" data-bg="<?php the_field('background_colour', 14); ?>">Useful</a></li>
                        <li><a href="#about" data-bg="<?php the_field('background_colour', 16); ?>">About</a></li>
                        <li><a href="#contact" data-bg="<?php the_field('background_colour', 18); ?>">Contact</a></li>
                        <li id="starting-point" class="current_item">STARTING</li>
                    </ul>
                </div>
            </div>
            
            <!-- #site-navigation -->

            <div class="site-branding">
                <a href="<?php echo esc_url( home_url( "https://stackoverflow.com/" ) ); ?>" rel="home"></a>
            </div><!-- .site-branding -->

            <div class="cp-line">
                <div class="cp-line-inner">
                    
            </div>
        </div>

    </header><!-- #masthead -->