Vfrdtyky

I have been having issues trying to take the search box out of the navbar when it collapses and displaying the search box at the top center of the navbar. Also if i wanted to make a list using li tags that has it own row on the navbar on mobile view how can i accomplish this. here an example of what i am trying trying to achieve. You see how the search box is at the center of the navbar and how the li tags has it own row which says features,good and hotels. Do i have to change the position of the search box using absolute? Wondering what the best way of achieving this task.

here my code:

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>