Q:

Bootstrap 4 Navbar Taller On Tablet Screen amongst split behavior

I'm using Bootstrap 4 for my personal web site.   The problem I am having is that on my tablet the top menu splits into 2 lines:  

The "font awesome" icon is displayed in the top row
Immediately below each icon is a row of each section name the font awesome icon represents. 

Is it possible to force this to be j (such as what I see on my computer screen) or otherwise to become the 3 line menu instead of splitting into 2 lines?   I want the menu to have a maximum height of the computer screen version I see. 
The web site is here
What I am wanting to be displayed on the tablet version is a 3 line menu someone will click on the top left and the top right be the "search" and search submit button. 

A:

Navigations with lots of content are tricky... but this is what I think will get you what you're looking for and will be proper way to display such a navigation:
(1) You got a lot of elements and you want a '3 line menu' (which is called a burger menu or a hamburger menu) on a tablet; this is done via the property: navbar-expand-xl which basically communicates that menu should be expanded from "burger mode" to "expanded mode" when the device resolution is 1200px.  You make this change on your navigation element, like:
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">

(2) Next, when the menu is expanded, we see 3 lines for each element, icon and it's name underneath, you can style it using the following css:
.navbar-expand-xl .navbar-nav { display: -webkit-inline-box; }

... to continue to force "displayed all on one line"... you may have to set this property for different screen sizes (if you don't do point #1 of my answer) 
.navbar-expand-lg .navbar-nav { display: -webkit-inline-box; }
/* or */
.navbar-expand-md .navbar-nav { display: -webkit-inline-box; }

