Argthtjtr

I want to create a gap above navigation bar for echo name like: Welcome Sarah! Kindly check the image what output I am getting:

1. In above image I want to echo Welcome Sarah above the Login | Sign Up buttons.


2. I want to show search bar above the Adidad Shoe Store Starting from let-top. And welcome Sarah on the right-end. Then navigation will show.

my code:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>



 <div class="container">

 <div class="row float-right" >



  // Search bar

 <input type="text" placeholder="Search" name="search">

 <a href="">Hello Sarah!</a>

 </div>

 </div>





  <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">



  <a class="navbar-brand" href="#">Adidas Shoe Store</a>

  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">

 <span class="navbar-toggler-icon"></span>

 </button>

 <div id="navb" class="navbar-collapse collapse hide">

<ul class="navbar-nav">







  <li class="nav-item">

    <a class="nav-link" href="#" style="color:#007bff;">Home</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Page 1</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#">Page 2</a>

  </li>

  </ul>



<ul class="nav navbar-nav ml-auto">

  <li class="nav-item">

    <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>

  </li>

  <li class="nav-item">

    <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>

  </li>

  </ul>

 </div>

</nav>

This is not working as expected because Bootstrap .fixed-top class assigns z-index value of 1030 and position:fixed at top to the nav.

As a result, the .container you added is displayed both behind and not above the nav.

The .container needs position other than static and z-index greater than 1030 to display above the nav. Additionally, the nav needs some padding-top to make visual space for the .container contents in this scenario.

The following structure and added CSS achieves the effect you're looking for:

<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">

   <div class="row">

    <div class="col-sm-6">

      <input type="text" placeholder="Search" name="search">

     </div>

    <div class="col-sm-6 text-right">

      <a href="">Hello Sarah!</a>

     </div>

   </div>

</div>



<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">

(I've thrown in two .col-sm-6 divs inside your .row to make things easier to arrange on mobile resolutions; also note that .container class is of limited width unlike nav so you should change it to .container-fluid)