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

What is the best way to calculate the sum of table data with a specific class using jQuery?

If I had a table like this: <table class="table questions"> <tr> <td class="someClass">Some data</td> <td class="someOtherclass">Some data</td> </tr> <tr> <td class="s ...

javascriptjquery

InvalidAction: The function forEach cannot be applied to "res"

Here is the HTML code that I am currently working with: <div *ngIf="chart" class="col-xl-4 col-lg-6"> <div class="card cardColor mb-3"> <div class="card-header headColor"> <img class="img-fluid" src="../../../ ...

javascriptangulartypescript

What is the best way to align text in the center of a button?

When creating custom buttons in CSS using <button>, I noticed that the text appears to be centered both horizontally and vertically across all browsers without the need for padding, text-align, or other properties. Simply adjusting the width and heig ...

htmlcss

What is the step-by-step process for chaining ajax requests using $q.deffer?

I have a task that requires the browser to make N requests to the server, where the requests must be synchronous and start only after the previous request has completed. One way to achieve this is by writing a function with a for loop and recursively call ...

javascriptangularjsasynchronousrequestpromise

The customized sweet alert button is failing to trigger its designated function

I integrated vue-swal to show a pop-up dialog with customized functionality. However, I faced an issue while modifying the swal. In my modified version, there are 3 buttons each with specific actions that should be triggered upon clicking. But for some rea ...

javascriptvue.js

State in Vuex is failing to update effectively when actions are being utilized

I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(page ...

javascriptvue.jsvuejs2axiosvuex

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...

jqueryhtmlcss

Can Cell be rendered into a targeted element?

Can a Cell from CellJS be rendered into a specific HTML element? For example, including a Cell alongside some static HTML that is not managed by cell. Or having two separate Cell apps on a single page. <!DOCTYPE html> <html> <header> ...

javascriptcelljs

Obtain the element created by a directive within the controller

I'm currently utilizing the wrapper located at: https://github.com/Yankovsky/nouislider-angular/blob/master/nouislider.js for the nouislider plugin. Within my controller, I aim to access the element that I've created in the template: <div ya ...

javascriptangularjs

Issue with updating dropdown values in real-time in React

I am a beginner with React and I have a question regarding fetching dropdown values from the backend. Despite using async-await functions, the list is not getting populated with items. Any assistance in this matter would be greatly appreciated. Here is th ...

javascriptreactjsasync-awaitaxiosdropdown

Testing Async operations in the browser with Mocha and Chai

I'm having trouble running async tests with mocha. Below is the snippet of my code: describe('Brightcove Wrapper',function(){ describe("#init()", function() { it("Should inject the brightcove javascript", function(callback){ ...

javascriptunit-testingbddmocha.jschai

Using JQuery and PHP to make an Ajax request and handle JSON response

I'm attempting to complete a straightforward exercise: The task involves entering two numbers in separate inputs, clicking a button, and seeing the result appear in a third input. sum.html: <html> <head> <title>Sum</tit ...

phpjqueryhtmlajaxjson

Can you explain the functionality of this combination of jquery and form elements?

I have been working on jQuery code that looks like this: function submitFormData() { $('#myform').attr('action', "./filterData.action"); $('#myform').submit(); } Here is the form being referenced: <form name="myf ...

jquery

Using Javascript, incorporate a string variable into the response

Currently, I'm working with a node.js program and I've come across this response: 'Content-Disposition': 'attachment; filename="tts.mp3"' Instead of using "tts.mp3," I have a variable named textToConvert. How can I modify it ...

javascriptstringnode.jstextresponse

What is the function of typekit.com and how does it utilize @font-face technology

What is the functionality of typekit.com? Several websites similar to typekit enable CSS designers to utilize custom fonts, but how does it work? Is it possible for me to create a site like typekit myself? What technologies are involved in this process? A ...

phpcssrubyfonts

What is the reason for receiving a prohibited token?

I've encountered an issue with an illegal token error message in the code snippet below: $('.navigation3').click(function(event) { var $nav3 = $(this), $dd = $nav3.next('.dropdown'); $nav3.toggleClass('active ...

jquery

ngMaterial flex layout not functioning properly

I can't seem to figure out why ngMaterial is not laying out my simple hello world app in a row. Despite checking the console for errors, I still can't see what I am doing wrong. I expected the content below to be displayed horizontally instead of ...

javascriptangularjsflexbox

Incorporating RFID reader functionality into a website

I am currently facing an issue with integrating an RFID card reader into a web page. After some research, it seems that the solution involves creating an ActiveX component and using JavaScript. My question is, how can we go about building an ActiveX compo ...

javascriptactivexhtmlsmartcardrfid

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

Tips for effectively wrapping Material UI v5 component to ensure the Grow component functions correctly

Being a newcomer to React, I want to apologize in advance for any silly mistakes or inaccuracies that may be present. I have successfully implemented the code for my Blog page: export default function Blog() { const [photos, setPhotos] = useState([]); ...

javascriptreactjsmaterial-uijsx