1

I'm working on css structures. I am new to this business but I could not find how to do this. I want to add 1 search icon next to the tab icon on the navigation bar. I couldn't find which css property I can use to get these two icons into the same plane. I use the staging template structure in the colorlib site as a source. source: https://colorlib.com/wp/template/staging/ If there is a different structure that I need to add from the components used in html css or js files, just write it. Thanks.

put search icon on navbar

//Canvas Menu
$(".canvas__open").on('click', function() {
  $(".offcanvas-menu-wrapper").addClass("active");
  $(".offcanvas-menu-overlay").addClass("active");
});

$(".offcanvas-menu-overlay").on('click', function() {
  $(".offcanvas-menu-wrapper").removeClass("active");
  $(".offcanvas-menu-overlay").removeClass("active");
});
.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
  /*padding: 30px 0 0;*/
}


/* Mobile and Tablet Screen Less then 992px */

@media screen and (max-width: 992px) {
  .header {
    /* top left-right bottom*/
    width: 100%;
    height: 4rem;
    padding: 0.50rem 0.1rem 0.50rem;
  }
  div.canvas__open {
    right: 1rem;
  }
  div.canvas__open span#mySpan {
    top: 120px;
  }
  div.header__logo {
    margin-top: 0.25rem;
    margin-left: 0.5rem;
    margin-bottom: 0.25rem;
  }
}

.canvas__open {
  display: block;
  font-size: 22px;
  color: #ffffff;
  height: 35px;
  width: 35px;
  line-height: 35px;
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 2px;
  cursor: pointer;
  position: absolute;
  right: 1rem;
  top: 1rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<header>
  <div class="headroom header" id="navbar-main">
    <div class="row">
      <div class="col-lg-3">
        <div class="header__logo">
          <a href="#"><img src="./public/img/logo.png" alt=""></a>
        </div>
        <div class="col-lg-6">
          <nav class="header__menu mobile-menu">
            <ul>
              <li class="active"><a href="./index.html">Home</a></li>
              <!--<li><a href="./projects.html">Projects</a></li>-->
              <li><a href="./about.html">About</a></li>
              <li><a href="#">Pages</a>
                <ul class="dropdown">
                  <li><a href="./Project-details.html">Project Details</a></li>
                  <li><a href="./about.html">About</a></li>
                  <li><a href="./services.html">Services</a></li>
                  <li><a href="./blog-details.html">Blog Details</a></li>
                </ul>
              </li>
              <li><a href="./blog.html">Blog</a></li>
              <li><a href="./contact.html">Contact</a></li>
            </ul>
          </nav>
        </div>
        <div class="col-lg-3">
          <div class="header__widget">
            <span>Contact us</span>
            <!--<h4>+01 123 456 789</h4>-->
          </div>
        </div>
        <i class="fa fa-search" style="margin: 1rem; float: right;"></i>
      </div>

      <div class="canvas__open">
        <i class="fa fa-bars"></i>
      </div>
    </div>
</header>
  • You CSS is incomplete. Do you have Bootstrap or something you forgot to include? I tried to make a [mcve] but was not able with the codes you have supplied – mplungjan Oct 12 '20 at 12:22
  • Does this answer your question? [How to add a search box with icon to the navbar in Bootstrap 3?](https://stackoverflow.com/questions/18619740/how-to-add-a-search-box-with-icon-to-the-navbar-in-bootstrap-3) – Awais Oct 12 '20 at 12:35
  • Since I use a webpack plugin, I have not added all the structures I use. I am having a problem with css but I cannot guess which component information I should add more. Thanks –  Oct 12 '20 at 12:38

1 Answers1

0

There are two solutions:

solutions 1 :

use display : inline-block , Give this to search and sandwiches navbar

solutions 2 :

usedisplay : flex , Give this to their parent tag

Kasra Habibbeygi
  • 182
  • 12