I tested this code on my site, and it doesn't show a line under the social icons on desktop nor on mobile. You can also customize the transition speed, the thickness of the line, and I think you can also change the color of the line too. Copy and paste the code below in the custom css section, located the the design page.
// Stretchy Navigation Line - v2 //
.header-nav-item::after {
content: '';
background: #000000; //color
height: 2px; //thickness
width: 0;
display: block;
margin-top: 2px !important;
transition: width 1s; //animation speed
margin: 0 auto;
}
.header-nav-item:hover::after {
width: 100%;
}
.header-nav-item--active a {
background-image: none !important;
}