jquery – Activate SVG on link hover.

I have it under a set of SVG menu items. I would like to animate the arch bit below any menu item selected.

And then when the menu item is clicked, the arch should remain as the page marker. I’ve tried using the background image, animating the position, or using the pseudo status for each link but the problem doesn’t always land on the center of the menu item either, and the border line appears, because it cuts Need an arch with an out if it makes sense?

Codepen

.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;
    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;
  margin:0;
  padding:0;
  list-style:none;
}

ul.menu-nav li {
  padding:30px 0 60px;
  position:relative;
  
}

ul.menu-nav li a {

}
<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">Work</a></li>
                        <li><a href="#interesting">Interesting</a></li>
                        <li><a href="#useful">Useful</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></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>

  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 1190.55 52.22" style="enable-background:new 0 0 1190.55 52.22;" xml:space="preserve">
<style type="text/css">
    .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<line class="st0" x1="0" y1="43.48" x2="581.13" y2="43.48"/>
<line class="st0" x1="609.42" y1="43.48" x2="1190.49" y2="43.48"/>
<path class="st0" d="M580.64,43.48V21.53c0-8.08,6.55-14.63,14.63-14.63s14.63,6.55,14.63,14.63v21.95"/>
</svg>

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

I have tried to target the path using CSS or jquery but it does not work. Can anyone point me in the right direction?

thanks so much!!

Write a Comment