Home Add form to new line in navbar
Reply: 1

Add form to new line in navbar

Rohan Chauhan
1#
Rohan Chauhan Published in 2018-01-13 07:20:27Z

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>

WebDevBooster
2#
WebDevBooster Reply to 2018-01-13 09:09:30Z

Below is the fix for your toggle button alignment. It's not entirely clear what you want with the search input though. You want it to expand on smaller screens?? Do you really mean expand and not shrink? (expanding on smaller screens doesn't make any sense to me)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<nav class="navbar navbar-expand-sm justify-content-between navbar-light bg-light">
    <a class="navbar-brand" href="{{route('homepage')}}">ODekh</a>
    
    <form method="get" action="{{route('product.search')}}" id="nav-form" class="form-inline order-sm-12">
        <div class="input-group mb-0">
            <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>
    
    <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">
                <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>
    </div>
</nav>



<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

You need to login account before you can post.

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

© 2016 Powered by mzan.com design MATCHINFO