<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form action="#" method="post"> <div class="d-lg-flex ml-0 ml-lg-auto "> <div class="navbar--row-1--location--label"> <div class="position-relative location-content"><button type="button" class="popup-trigger py-2 px-2 d-flex align-items-center"> <div class="icons map-icon"><img src="{{asset('upload/images/map.png')}}" alt=""></div><span class="mx-2" style="text-align: left;">Delivering to <strong>700037</strong></span> <div class="icons edit"> <a class="text-white" href="#" onclick="$('.aside2').asidebar2('open')"> <img src="{{asset('upload/images/pencil.png')}}" alt=""> </a></div> </button></div> </div> <div class="web-only"> <div class="navbar--search-form-wrapper"> <form> <div class="input-group"> <input type="text" id="search" name="search" autocomplete="off" class="form-control navbar--row-1--search--search-input" aria-label="Text input with dropdown button" placeholder="Search for Medicines"> <div class="searchIconWrapper"> <div class="sprite sprite-Search" style="height: 1.5rem; width: 1.5rem;"> <img src="{{asset('upload/images/magnifying-glass.png')}}" alt=""> </div> </div> </div> </form> </div> </div> </div> </form>

.navbar--row-1--location--label { font-size: .75rem; width: 11.125rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .location-content { border-top-left-radius: .125rem; border-bottom-left-radius: .125rem; } .position-relative { position: relative!important; } .navbar--row-1--location--label .popup-trigger { background: #eef2f7; border: 0; color: #0d4d71; cursor: pointer; height: 3.25rem; border-top-left-radius: .125rem; border-bottom-left-radius: .125rem; } .navbar--row-1--location--label .popup-trigger .map-icon { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…UtLjIyNC0uNS0uNXMuMjE1LS41MTYuNS0uNDc4di45Nzh6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=) no-repeat; } .navbar--row-1--location--label .popup-trigger .edit { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…VybyIgZD0iTTYuMjkgMTkuOGwtMi4yLjE1LjIyLTIuMTN6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=) no-repeat; } .navbar--row-1--location--label .popup-trigger .icons { height: 1.5rem; width: 1.5rem; background-size: contain!important; background-position: center!important; } .navbar--row-1--location--label .popup-trigger .edit { background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…VybyIgZD0iTTYuMjkgMTkuOGwtMi4yLjE1LjIyLTIuMTN6Ii8+CiAgICA8L2c+Cjwvc3ZnPgo=) no-repeat; } .navbar--search-form-wrapper { width: 100%; min-width: 26rem; max-width: 26rem; } .input-group { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .input-group .form-control.navbar--row-1--search--search-input { height: 3.25rem; border: 0; border-radius: 0; border-top-right-radius: .125rem; border-bottom-right-radius: .125rem; background-color: #e8e8e8; } .searchIconWrapper { background: #edf1f7; position: absolute; height: 3.25rem; width: 3.125rem; right: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-top-right-radius: .125rem; border-bottom-right-radius: .125rem; } .sprite-Search { width: 32px; height: 32px; background-position: 77% 22.5%; background-size: 3050% 2000%; } .sprite { background-image: url(/static/magnifying-glass.png); background-repeat: no-repeat; display: block; }