Bootstrap 4, как я могу удалить окно поиска за пределами коллапса и правильно расположить поле поиска

Question

У меня возникли проблемы при попытке вывести окно поиска из панели навигации, когда оно свалилось, и при отображении окна поиска в центре вверху панели навигации. Также, если бы я хотел сделать список, используя теги li, у которого есть собственная строка на панели навигации в мобильном представлении, как я могу сделать это. Вот пример того, чего я пытаюсь достичь. Вы видите, как окно поиска находится в центре навигационной панели и как у тегов li есть свой собственный ряд, в котором указаны функции, товары и отели. Должен ли я изменить положение окна поиска, используя абсолют? Хотите знать, как лучше всего решить эту задачу?

вот мой код:

https://jsfiddle.net/mikeshasaco/05mfrb6g/5/

#custom-search-input {
  margin: 0;
  margin-top: 10px;
  padding: 0;
}

#custom-search-input .search-query {
  padding-right: 3px;
  padding-right: 4px \9;
  padding-left: 3px;
  padding-left: 4px \9;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  width: 298px;
}

#custom-search-input button {
  border: 0;
  background: none;
  /** belows styles are working good */
  padding: 2px 5px;
  margin-top: 2px;
  position: relative;
  left: -28px;
  /* IE7-8 doesn't have border-radius, so don't indent the padding */
  margin-bottom: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #D9230F;
}

.search-query:focus+button {
  z-index: 3;
}

---

{{-- fixed-top --}}
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light border-bottom " id="navbarfix" >
        <div class="container">

        <a class="navbar-brand" href="">Exampe</a>
    <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a id="navbarDropdown " class="nav-link dropdown-toggle " href="" style="color:#B35464; font-size:16px;" role="button" aria-haspopup="true" aria-expanded="false" v-pre> Dropdown <span class="caret"></span> </a>
                    <div class="dropdown-menu mega-menu" aria-labelledby="navbarDropdown">
                        <div class="container">
                            <ul>
                                <li>blog</li>
                                <li>help</li>
                            </ul>
                        </div>
                    </div>

                </li>

                <li class="nav-item active">
                    <a class="nav-link" href="" style="color: #B35464; font-size:16px;"> Help</a>
                </li>


                {{-- name saves the query result to the bar && id query print the result--}}



                <form class="navbar-form" action="" method="GET">
                        <div id="custom-search-input">
                            <div class="input-group  col-md-12">
                                <input type="text"  name="query" id="query" value="" class="search-query form-control" placeholder="Search for ">
                            </div>
                        </div>

                </form>


            </ul>



            <ul class="navbar-nav ml-auto">


                <li><a class="nav-link" href="{{ route('login') }}">Login</a></li>
                <li><a class="nav-link" href="{{ route('register') }}">Register</a></li>

            </ul>

        </div>
    </div>
</nav>