Добавление текста в элементы

Имеется <header> с бутстраповским навигационным меню с дропдаунами и <footer> Я бы хотел сделать, чтоб при наведении на конкретный элемент в хэдере, соответствующий текст выводился в футер. Например, навожу курсором на "Элемент1" в хэдере, а в футере, в первом .footer-box появляется "Элемент1", далее в дропдаун меню навожусь на "Элемент 1.1" и во второй .footer-box записывается "Элемент 1.1" Надеюсь, что понятно изложил мысль, заранее всем спасибо!

Ниже код <header>:

<nav class="navbar navbar-light navbar-expand-lg mainmenu">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars" aria-hidden="true"></span>
    </button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
         <li class="nav-item dropdown">Элемент1
              <ul>
                   <li>Элемент 1.1</li>
                   <li>Элемент 1.2</li>
                   <li>Элемент 1.3</li>
              </ul>
         </li>
         <li class="nav-item dropdown">Элемент2</li>
         <li class="nav-item dropdown">Элемент3</li>
    </ul>
</div>

А дальше код футера:

<nav class="navbar d-flex align-items-center">
    <div class="d-flex align-items-center mx-auto">
        <div class="footer-box"></div>
        <img src="images/icons/nav-arrow.svg">
        <div class="footer-box"></div>
        <img src="images/icons/nav-arrow.svg">
        <div class="footer-box"></div>
        <img src="images/icons/nav-arrow.svg">
        <div class="footer-box"></div>
    </div>
</nav>