Bootstrap 4 menu on small devices - html

Question

The menu on a laptop or desktop is like I want it to be, however on a small screen, I'm 'losing' to options; the search icon and the translate menu. What I would like to achieve is that the logo, the search icon, and the translate bar, and the hamburger menu, are in line with each other. Alternatively, an input field on the second line below the logo and the hamburger menu is workable too.
So far I have been working with the various Bootstrap nav bar components, but have not managed to get it right. In the code below there is also some smarty used, but I don't think that's of any impact on the solution.
Hope someone can point me in the right direction to take it a step further.
Thanks!
<nav class="navbar navbar-color-on-scroll navbar-expand-lg fixed-top scrolling-navbar navbar-transparent" color-on-scroll="170">
<div class="container-fluid">
<div class="navbar-header">
</div>
<div class="navbar-translate">
{* requires popper.js rel="tooltip" *}
{if $page_alias == 'hanse_311'}
<a class="navbar-brand" href="{root_url}" rel="noreferrer" title="{$sitename} | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="logo" alt="{$sitename}" src="{CGSmartImage src="{uploads_url}/images/cms/Logo_Hanse_UisgeBeatha.png" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=1}" height="90vh"/></a>
{else}
<a class="navbar-brand" href="{root_url}" rel="noreferrer" title="{$sitename} | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="logo" alt="{$sitename}" src="{CGSmartImage src="logo_1.jpg" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=0}" height="90vh"/></a>
{/if}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarNav" data-nav-image="{CGSmartImage src="logo_2.jpg" alt="{$sitename}" title="{$sitename}" noresponsive='1' notag=1 noembed=0}" data-color="orange"}
{Navigator action='default' template="{#theme_resource#}navigator_navigation_multilevel_bootstrap_menu.tpl"}
<form class="form-inline ml-auto text-dark" data-background-color="#990000">
{if $browser_lang != 'nl'}
<div class="form-group my-md-2 col-sm-9">
{include file='cms_template:google_Translate'}
</div>
{/if}
<div class="form-group col-sm-3">
{svg use="search"}
</div>
</form>
</div>
</div>
</nav>
As per request to add some HTML, first the header:
<div class="page-header page-header-small">
<div class="page-header-image" style="background-image: url('data:image/jpeg;base64,.........;">
</div>
<div class="content-center">
<div class="row">
<div class="col-md-8 ml-auto mr-auto">
<div class="rellax" data-rellax-speed="-3" style="transform: translate3d(0px, 0px, 0px);">
<h1 class="title">Downloads</h1>
</div>
<h4>
Downloaden van (technische) bootdocumenten
</h4>
<nav aria-label="breadcrumb" role="navigation">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="text-info">U bent hier: </li>
<li class="breadcrumb-item">
<a href="https://develop.some-site.eu/" title="Home">
Home
</a>
</li>
<li class="breadcrumb-item">
Links
</li>
<li class="breadcrumb-item active" aria-current="page">Downloads</li>
</ol>
</nav>
</nav>
</div>
</div>
</div>
</div>
And the code from menu from while in small screen mode
<nav class="navbar navbar-color-on-scroll navbar-expand-lg fixed-top scrolling-navbar navbar-transparent" color-on-scroll="170"><div class="container-fluid">
<div class="navbar-header"></div>
<div class="navbar-translate">
<a class="navbar-brand" href="https://develop.some-site.eu" rel="noreferrer" title="some site | Design based on Now_UI-Kit." data-placement="bottom" target="_blank"><img id="header-logo" class="largeLogo" alt="some site" src="data:image/png;base64,......">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="https://develop.some-site.eu/">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Boot en Schipper</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/afkomst-naam">Afkomst naam</a>
<a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/dehler-36-jv">Dehler 36 JV</a>
<a class="dropdown-item" href="https://develop.some-site.eu/boot-en-schipper/hanse_311">Hanse 311</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Logboek</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://develop.some-site.eu/logboek_categorie/logboek_artikelen">Artikelen</a>
<a class="dropdown-item" href="https://develop.some-site.eu/logboek_categorie/gps-tracks">GPS Tracks</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Media</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://develop.some-site.eu/fotos-en-videos-rondom-some-site/fotoalbums">Fotoalbums</a>
<a class="dropdown-item" href="https://develop.some-site.eu/fotos-en-videos-rondom-some-site/youtube">Youtube</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Links</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="https://develop.some-site.eu/links-downloads/downloads">Downloads</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="https://develop.some-site.eu/gastenboek">Gastenboek</a>
</li>
</ul>
<form class="form-inline ml-auto text-dark" data-background-color="#990000">
<div class="form-group my-md-2 col-sm-9">
<div id="google_translate_element"></div>
</div>
<div class="form-group col-sm-3">
<svg preserveAspectRatio="none" class="icon icon-search"><use xlink:href="#icon-search"></use></svg>
</div>
</form>
</div>
</div>
</nav>
Site on the development environment, if you resize, you see what I mean and try to achieve development site