Home Add form to new line in navbar
Reply: 0

Add form to new line in navbar

user2353
1#
user2353 Published in April 24, 2018, 8:31 am

I am using this code for following things

->add search form to new line in sm or smaller screen sizes

->float right the toggle button in sm or smaller screen sizes

The main issue is that the text input is not expanding when size is changin in the small screen it keep a constant max size of 13rem.

and how to make the toggle button right aligned. note: float-right is not working

<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light d-flex flex-row">
    <a class="navbar-brand" href="{{route('homepage')}}">ODekh</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>

<form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline">
    <div class="input-group mb-3">
        <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="search" placeholder="Search Books, Authors" name="search" value="">
        <div class="input-group-append border-0 bg-white">
            <button class="btn btn-outline-secondary" type="submit"><span class="fa fa-search"></span></button>
        </div>
    </div>
</form>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="">Books</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="">Cart</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">Login</a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="">My Account</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="">Logout</a>

     </div>
  </li>
</ul>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.305629 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO