я сделал навигационную панель. Я использовал собственный скрипт для отображения эффекта при наведении на ссылки в списке меню: https://github.com/shadeed/underliner. Мне удалось заставить его работать ... частично.
Веб-страница реагирует со складным меню, когда <990px. </p>
Функция javascript вызывается прямо перед (Я пытался положить его куда-то еще, но он не работает).
Моя первая проблема заключается в том, что, когда страница загружается с обычным меню (меню экрана компьютера), она работает. Даже если я уменьшу страницу, она все равно работает. Когда страница загружается со свернутым меню (экранное меню <990 пикселей), она не работает. Даже если я потрачу страницу, это не сработает. Я предполагаю, что когда сваливается панель навигации, информация вызывается с помощью data-target и aria-control. И в этом случае он не запускает функцию подчеркивания javascript. </p>
Моя вторая проблема заключается в том, что, что бы я ни пытался, мне не удается выровнять свернутый список меню по центру при отображении на смартфоне. (но социальный раздел правильно центрирован (но в другом div)
<div class="collapse navbar-collapse" id="navbarSupportedContent1" style="margin-top: 103px;">
<ul class="navbar-nav nav-fill w-100 underliner">
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 100 100">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#c94e37" />
<stop offset="100%" stop-color="#ff6346" />
</linearGradient>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#c94e37" />
<stop offset="100%" stop-color="#ff6346" />
</linearGradient>
</defs>
</svg>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK1.html">LINK1</a> </li>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK2.html">LINK2</a> </li>
<li class="nav-item c-nav__item"> <a class="nav-link" href="LINK3.php">LINK3</a> </li>
<script src="js/menu_soulignement.js"></script>
</ul>
<form class="form-inline my-2 my-lg-0" style="align-items: : center">
<div class="container" style=" margin-top: 15px; align-items: : center">
<div class="row justify-content-center" style="vertical-align: middle">
<ul class="social-menu" style="align-content: center">
<li><a href="http://twitter.com/mytwitter" data-toggle="tooltip" data-placement="bottom" title="Suivez-moi @mytwitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true" ></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Aimez-moi #myfacebook" target="_blank"><i class="fa fa-facebook" aria-hidden="true" ></i></a></li>
<li><a href="http://www.instagram.com/myinsta" data-toggle="tooltip" data-placement="bottom" title="Admirez-moi @myinsta" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Épinglez-moi @mypint" target="_blank"><i class="fa fa-pinterest" aria-hidden="true" ></i></a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Regardez-moi #myyoutube" target="_blank"><i class="fa fa-youtube" aria-hidden="true" ></i></a></li>
</ul>
</div>
</div>
</form>
</div>