CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
AlejoDev
AlejoDev

Reputation: 3252

Fixed Input Group Bootstrap 4

I have a problem with bootstrap, because I need to leave static a search bar as shown below:

enter image description here

To do this I use the following code:

HTML:

<nav class="navbar fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>  
<div class="list-page">
  <div class="row-search-bar">
    <div class="pos-rel">
        <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button">Button</button>
            </div>
        </div>
    </div>
  </div>
  <div class="container">
      <div class="row">
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
        <p>This is an element that is part of the list of results</p>
      </div>
  </div>
</div>

CSS:

@media (max-width: 575.98px) {  
  .list-page {
    padding-top: 24%;
    margin-left: 10%;
    margin-right: 10%;
  } 
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) { 
  .list-page {
    padding-top: 14%;
    margin-left: 10%;
    margin-right: 10%;
  }  
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) { 
  .list-page {
    padding-top: 7%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) { 
  .list-page {
    padding-top: 6%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) { 
  .list-page {
    padding-top: 6%;
    margin-left: 10%;
    margin-right: 10%;
  }
 }

 .pos-rel{
  position: relative;
  width:100%;
 }

 .row-search-bar{
  position: relative;
  z-index: 1030;
  background-color:red;
 }

The important part of my previous code is that it uses the property position: relative; in the row-search-bar css class, but when you move the content of the page, this search bar does not stay in place, it moves with the content. For the above, to achieve the goal of having the search bar stay in place, I use position: fixed; in the row-search-bar css class but this happens:

enter image description here

So what should I do to make the search bar stay in place when I scroll up / down and the search bar looks like this:

enter image description here

Many Thanks!

Upvotes: 1

Views: 625

Answers (2)

mahan
mahan

Reputation: 14925

Use a container-fluid fixed-top w-100 for the navbar and search form. Inside this container, use a container with two rows: one for the nav and one for the search form. Since you use fixed-top, you need to push down the other content of the body. Set padding-top of body to 160px to do so. Height of this fixed container is 160px. Read more about why you need to so 

body {
  padding-top: 160px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container-fluid fixed-top w-100">
  <div class="container ">
    <div class="row">
      <div class="col">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" 
                  aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div class="input-group mb-3 mt-5">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" 
                 aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/ZRLXWM?

If you want full-width nav, move the navbar outside of the container and remove the padding of container-fluid.

body {
  padding-top: 160px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid fixed-top w-100 p-0">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col">
        <div class="input-group mb-3 mt-5">
          <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" type="button">Button</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/VdPMPv

Upvotes: 2

Pranshu Dobhal
Pranshu Dobhal

Reputation: 59

I don't think there's a problem with the position: relative; or the code.

I ran the same code and it seems to work fine for me.

Have a look

The problem that you're facing is because you haven't included Bootstrap 4 files.

You might be using a Bootstrap 3 cdn which looks like https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

I would advise you to change it to

https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css

Upvotes: 0

Related Questions