Solución:
Puedes usar el flex-column clase de utilidad flexbox para apilar los 2 navegadores verticalmente junto al icono. Esto establece flex-direction: column sobre el navbar-collapse div para que sus elementos secundarios se apilen verticalmente.
<nav>
<div>
<button type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span></span>
</button>
<h1><a href="https://foroayuda.es/#"><i aria-hidden="true"></i></a></h1>
<div>
<ul>
<li>
<a href="https://foroayuda.es/#">Home</a>
</li>
<li>
<a href="https://foroayuda.es/#">Product</a>
</li>
<li>
<a href="https://foroayuda.es/#">Shop</a>
</li>
<li>
<a href="https://foroayuda.es/#">About</a>
</li>
<li>
<a href="https://foroayuda.es/#">Events</a>
</li>
</ul>
<ul>
<li>
<a href="https://foroayuda.es/#"><i></i></a>
</li>
<li>
<a href="https://foroayuda.es/#"><i></i></a>
</li>
<li>
<a href="https://foroayuda.es/#"><i></i></a>
</li>
</ul>
</div>
</div>
</nav>
Demostración: barra de navegación Bootstrap 4 con 2 filas
Aquí hay otra variación con las 2 filas y Derecha alinear formulario de búsqueda:
<nav>
<button type="button" data-toggle="collapse" data-target="#navbarCollapse">
<span></span>
</button>
<a href="https://foroayuda.es/#">Brand</a>
<div>
<ul>
<li>
<a href="https://foroayuda.es/#">Shop</a>
</li>
<li>
<a href="https://foroayuda.es/#">Products</a>
</li>
<li>
<a href="https://foroayuda.es/#">Team</a>
</li>
<li>
<a href="https://foroayuda.es/#">About</a>
</li>
<li>
<a href="https://foroayuda.es/#">Events</a>
</li>
</ul>
<form>
...
</form>
</div>
</nav>
Demostración: barra de navegación con 2 filas a la derecha
Actualización para Bootstrap 4.0.0:
https://www.codeply.com/go/05hEHoiUvv
Aquí hay un escenario alternativo con 2 barras de navegación con un conmutador móvil
Bootstrap 4.0: dos NavBars que se colapsan en una sola palanca
¿Cómo puedo tener Brand y Navbar en líneas separadas?
Cómo mover el elemento ‘nav’ debajo de ‘navbar-brand’ en mi barra de navegación
¿Cómo colocar la barra de navegación debajo de la barra de navegación adhesiva usando bootstrap 4?
Bootstrap 4 Varias barras de navegación de techo fijo
La “variación con las 2 filas alineadas a la derecha” no alineó a la derecha las filas en Safari para mí. Puse las listas desordenadas en un nuevo div con el flex-column y ml-auto clases.
<nav>
<div>
<button type="button" data-toggle="collapse" data-target="#navbarCollapse"> <span></span> </button>
<h1><a href="https://foroayuda.es/#"><i aria-hidden="true"></i></a></h1>
<div>
<div>
<ul>
<li> <a href="https://foroayuda.es/#">Home</a> </li>
<li> <a href="https://foroayuda.es/#">Product</a> </li>
<li> <a href="https://foroayuda.es/#">Shop</a> </li>
<li> <a href="https://foroayuda.es/#">About</a> </li>
<li> <a href="https://foroayuda.es/#">Events</a> </li>
</ul>
<ul>
<li> <a href="https://foroayuda.es/#"><i></i></a> </li>
<li> <a href="https://foroayuda.es/#"><i></i></a> </li>
<li> <a href="https://foroayuda.es/#"><i></i></a> </li>
</ul>
</div>
</div>
</div>
</nav>