Button for searching through the Bootstrap navigation bar

I'm currently working on adding a search menu to the navbar in two different designs - one for screens below 767px and another for screens above 767px.

Although I have been successful in expanding the search bar, I am facing issues with the correct positioning of the expanded search bar.

https://i.stack.imgur.com/HKP0m.png

$(function(){
   $("#search-button, #search-icon").click(function(e){
     e.preventDefault();
     $("#search-button, #search-form").toggle();
   });
 })
#search-form { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

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

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu 1</a>
        </li>
        <li><a href="#contact">Menu 2</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>          
       <form role="search">
        <button id='search-button' class='btn btn-default '><span class='fa fa-search'></span></button>
        <div id='search-form' class="form-group">
          <div class="input-group">
            <span id='search-icon' class="input-group-addon"><span class='fa fa-search'></span></span>
            <input type="text" class="form-control" placeholder="Search">
          </div>
        </div>
      </form>
        </li>
        <li><a href=""><i class="fa fa-user"></i></a>
        </li>
        <li><a href="">Log In <span class="sr-only">(current)</span></a>
        </li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

javascriptjquerycsstwitter-bootstrap

Answer №1

One way to approach this is by following the default bootstrap style for adding forms to the navbar, and then customizing it for mobile devices with CSS.

$(function() {
  $("#search-button, #search-icon").click(function(e) {
    e.preventDefault();
    $("#search-button, #search-form").toggle();
  });
});
#search-form {
  display: none;
}
@media (max-width: 767px) {
  .custom-navbar {
    text-align: right;
  }
  .custom-navbar #search-button {
    float: none;
    border: none;
    right: 0;
    text-align: right;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Project name</a>

    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Menu 1</a>

        </li>
        <li><a href="#contact">Menu 2</a>

        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/"><i class="fa fa-user"></i></a>

        </li>
        <li><a href="/">Log In <span class="sr-only">(current)</span></a>

        </li>
      </ul>
      <form class="navbar-form navbar-right custom-navbar" role="search">
        <button id="search-button" class="btn btn-default"><span class="fa fa-search"></span>

        </button>
        <div id="search-form" class="form-group">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search"><span id="search-icon" class="input-group-addon"><span class="fa fa-search"></span></span>
          </div>
        </div>
      </form>
    </div>
  </div>
</nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using $.ajax, special characters are not rendered properly, displaying strange symbols instead of accents such as "é" or "ã"

I'm struggling to display the letter "é" using $.ajax and a JSON file. I've tried setting everything up with <meta charset="utf-8"> but all I get is an alert window showing "". Any help is appreciated, just not looking for PHP solutions. H ...

javascriptjqueryhtmljson

Spring Controller not able to resolve JSON response

I am facing a similar issue as described here but I have not been able to resolve it using the solutions provided. In my Spring application XML, I have only included the mvc annotation driven element: <mvc:annotation-driven /> Here is the code sni ...

jqueryjsonspring-mvc

After reloading the data tables, analyze the information and dynamically highlight any rows in red that remain unchanged

I have a table that is refreshed every 5 minutes using ajax.reload(). One of the rows in this table is labeled as CIP. My goal is to highlight the CIP row on each refresh where the value remains unchanged from the previous value (value received in the la ...

javascripthtmlajaxdatatables

Understanding how to break down intricate JSON strings into classes using either VB or C# programming languages

I have a JSON string that needs to be parsed and eventually stored in database tables. My plan is to parse it into VB .NET classes (objects) and then store the data in the tables. I have Newtown imported into my .NET environment, but I'm not very fami ...

javascriptjsonvb.net

I'm puzzled as to why, but my code seems to be causing an issue with the command prompt, possibly due

Recently, I've been taking on the challenges of Advent of Code. Day 2 has me stumped, as there's a peculiar issue with the code when running it through node.js in the command prompt: const fs = require("fs"); var valid = fs.readFileSync("inpu ...

javascriptnode.jsloops

What is the best way to link labels with input fields located separately in Angular?

Imagine a scenario where labels and form fields are being created in a *ngFor loop, as shown below: app.component.ts export class AppComponent { items = ['aaa', 'bbbbbb', 'ccccccccc'] } app.component.html <div class ...

javascriptangularformstypescript

Customer Notification System Malfunctioning on Front End

I am currently experimenting with MeteorJS technology and attempting to use alerts for success or failure notifications when making a meteor call. However, I've encountered an issue where the alerts are not functioning as expected. T ...

javascriptmeteor

myObject loop not functioning properly in Internet Explorer version 10

Could someone please point out what is wrong with this code snippet? HTML: <div id="res"></div> Javascript: var myObject = { "a" : { src : "someimagepath_a.png" }, "b" : { src : "someimagepath_b.png" }, }; va ...

javascriptjsoninternet-explorer-10

Exploring the power of intercepting response.send() and response.json() in express.js

Imagine having various instances where response.send(someData) is utilized. What if you wish to implement a universal interceptor that captures all .send functions and modifies someData? Is there a method within express.js to achieve this, such as hooks, ...

javascriptnode.jsexpress

Is the fullcalendar only shown when a button is clicked or the window is resized?

I am encountering an issue with the jQuery FullCalendar when using it with AngularJS and AngularStrap. The problem appears to be that the calendar only displays properly when I click on one of the buttons in the calendar or resize the browser window. This ...

twitter-bootstrapangularjsfullcalendarangular-uibootstrap-modal

There appears to be a malfunction with WebRupee

I have incorporated the new rupee sign into my website to represent Indian currency. Below is the code snippet I used: For the script, I included " and also added the following: <span class="WebRupee">Rs.</span> 116,754.00 To style it using ...

javascriptcss

Issue with Vue.js: document.querySelector is returning a null value even though the element clearly exists

I'm currently working on implementing a responsive navbar following Kevin Powell's tutorial, but I've run into an issue. For some reason, when I try to select the element with the class 'primary-navigation' using 'const primar ...

javascriptvue.js

Update the class of the appropriate navigation tab when the corresponding div is scrolled into view

After reading similar questions and doing some research on scrollspy, I don't think it will provide the functionality I need. It seems to only support bootstrap style highlighting. If there is more to it that I'm not aware of, please inform me! ...

javascriptjqueryangularjsscrollnavigation

When a new ajax function is added, the original Ajax code stops functioning

I've been working on getting the code below to function properly. It seems that when I test the code, two validation functions are working correctly. However, when I include the validateUsername() function along with the if statement in the code, ever ...

javascriptajaxfunction

Expand the image within the iron-image component

Within a div, I have an element: <div style="width:330px;"><iron-image src="image.png"></iron-image></div>. The image is 315px wide and 237px tall. I want the image to expand to 330px in width to fit its container without breaking t ...

htmlcssimagepolymerpolymer-1.0

Steps to indicate a selected check column in a grid

I am working with a grid that has a check column, and I need to programmatically mark the checkbox. This is how the check column is coded: columns: { items:[ { itemId: 'checkColumn', xtype: 'selectallche ...

javascripthtmlextjs

Looking for a powerful filtering menu similar to Excel or Kendo UI Grid in Datatables?

Is there a way to add Excel-like filtering to DataTables? It's surprising that such a widely used and advanced plugin doesn't have this feature already. If not, is there an easy way to implement it? Below are examples of advanced menu filters sim ...

javascriptexcelgridviewfilterdatatables

The drop-down menu is misaligned from its designated position underneath the title

Trying to incorporate a dropdown menu into my website, I am structuring the HTML as follows: <ul class="topnav"> <li> SECTION TITLE <ul class="subnav"> <li>One</li> <li>Two</li> ...

jqueryhtmlcssdrop-down-menu

Encountering issues while trying to establish a connection to MongoDB through JavaScript

I have developed a code for seamlessly integrating various social networking logins with nodejs. Below is my server.js file: // include the necessary tools var express = require('express'); var app = express(); var port = process.env ...

javascriptnode.jsmongodb

Node.js/Express/Jade scripts failing to load in the expected order

Imagine having this code snippet in a .jade file: doctype 5 html head title= title link(rel='stylesheet', href='/stylesheets/style.css') script(src='/javascripts/ocanvas-2.2.2.min.js', type='text/javascript') ...

javascriptnode.jsexpresspug