What is the best way to position a search bar in the center of the navigation bar while still ensuring the webpage remains responsive?

Being new to the world of CSS and HTML, I am currently facing challenges while creating a webpage for my school project. Specifically, I am struggling with inserting a search bar in the middle of the navigation bar rather than on the left or right side. Although I have managed to find code snippets from various websites to override Bootstrap CSS codes and position the search bar in the center, I encountered an issue where it does not fit properly in the drop-down menu on smaller screens. View Webpage View Dropdown Menu

Below is the HTML file snippet I am working with:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>{% block title %} {% endblock %} - Snaplost</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@700&display=swap" rel="stylesheet">
  <link href="{{ url_for('static', filename='style.css' )}}" rel="stylesheet">  
  <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@700&display=swap" rel="stylesheet">

</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="{{ url_for('home') }}">Snaplost.</a>
    </div>
    
      <ul class="nav navbar-nav navbar-center">
<form class="navbar-form navbar-center" role="search">
        <div class="form-group input-group">
          <input type="text" class="form-control" placeholder="Search..">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>        
        </div>
      </form>
       </ul>

      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Login</a></li>
        <li><a href="#">Register</a></li>
      </ul>
      
    </div>
  </div>
</nav>

<div class="container">    
{% block content %} {% endblock %}  
</div>

<script src=""https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>
</html>

If anyone can offer advice or assistance in addressing this issue, it would be greatly appreciated! Thank you!

javascripthtmlcssbootstrap-4

Answer №1

Are you wondering how to ensure that it remains at the top without wrapping onto a new line?

If that's the case, utilizing flexbox could be the solution. By applying "display: flex" to the parent div, it will keep everything in a single line, unless "flex-wrap: wrap" is used. You can then specify the width for each element within this row of content, also considering the option of flex-grow.

A comprehensive guide on flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I hope this information proves useful!

Following further clarification: To shift your search bar to the next row of content, you can still rely on flexbox and apply the "flex-wrap:wrap" property to the parent container.

In order for your content to flow onto the subsequent row using flexbox, all elements in a single row should collectively occupy 100% width or the succeeding element (or parent container) must not fit within the same row: e.g.
first row: two elements with 33% width each second row: one element with 35% or more specified width [100% - (33% * 2) = 34% width or less will prevent wrapping]

You could adjust the search bar div width to 100%, increase the width of login and register links so the search bar doesn't fit on the same row...

Alternatively, simply insert a line break tag, "<' br '>", before the search bar in your HTML ;)

Best of luck with your project!

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

Ways to retrieve the clicked item's index in a jQuery collection without using the index() method

Is there a way to obtain the index of clicked elements easily? var $inputs = $("input"); $inputs.click(function() { console.log($(this).index()) }); This method correctly works for the structure below: div>(input+input+input) However, I am encoun ...

javascriptjqueryhtml

Is the default animation duration of Compass being ignored?

After recently updating to Compass version 1.0.16, I started setting up basic usage of the new animation features. However, I encountered an issue where setting default values for different animation settings did not take effect. This led me to hard-code t ...

cssanimationsasscompass-sass

Invoke the controller function programmatically through dynamically generated HTML

In my controller, there is a function named $scope.removePoster. Within the same controller, there is a table creation function that calls $scope.removePoster like so: for(var i=0; i < 6 && postersNum >= 0; i++){ ... table += '<t ...

javascriptangularjs

Tips for eliminating any default white space visible between tags:

What is the best way to eliminate white space gaps between div tags and adjust pixel differences between them in HTML code? My current alignment is off and there are noticeable white spaces between div tags. I have tried using a reset link but it didn&apo ...

jqueryhtmlcss

How can I display an iframe element only if it exists within an object in Angular?

I'm currently exploring options to specifically display the iframe element within a block of HTML content being sent to my Angular application. While I can use a *ngIf directive in my template to check for the presence of the tag, I am unsure of how ...

javascriptangulartypescript

Can someone help me with retrieving items from local storage and displaying them in my list view?

I am currently working on creating a Todo list that includes two values: "Title" and "Detail". I have successfully managed to store items in my local storage. However, I am facing challenges in retrieving the stored items from the local storage and display ...

javascriptreactjs

The timer is malfunctioning

I am new to JavaScript and looking to create a simple countdown. I came across this script: http://codepen.io/scottobrien/pen/Fvawk However, when I try to customize it with my own settings, nothing seems to happen. Thank you for any assistance! Below is ...

javascriptjqueryhtmlcountdown

The color type input is not responding to the onChange event

I have been searching a lot and exploring answers on Stack Overflow, yet I have had no luck. I am trying to retrieve the color value when the color is changed in an input field. Here is the code I am using, could you please assist me in finding out why it ...

javascriptjqueryhtmlcss

Ensure that the textbox remains safe from accidental keyboard inputs

How can I ensure that users can only select a date from the calendar control in my textbox, rather than typing it manually, even if I make the textbox read-only? ...

javascriptasp.netajax

Tips for automatically hiding a button when the ion-content is being scrolled and displaying it again once scrolling has stopped

I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...

htmlcssionic-frameworkionic3scrollview

`Unveil the hidden edges of the Google timeline chart`

Does anyone know how to remove the chart border from a Google timeline chart using this script? <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load ...

javascriptchartsgoogle-visualizationtimeline

Converting PHP code to JavaScript and extracting <script> tags into HTML

Currently, I am working on a small game where I transfer essential game data to the client by constructing the data and inserting it into the HTML as shown below: <?php echo "<script>"; echo "window.gd = ".json_encode($manager->game, ...

javascriptphp

Using the <a> tag within a PHP script

Within my PHP code, I utilized the tag. However, when testing the code, the output appeared as a link but was not clickable. $data1 = mysql_query("SELECT * FROM image_upload INNER JOIN user_table ON image_upload.user_id=user_table.user_id WHERE flag=1 ORD ...

phphtml

The mongoose find query is coming back with an empty array, even though there is data present in the

My goal is to update commodity data in my stockrecord collection by adding the quantity of a commodity if it already exists in the collection. However, I encountered an issue where the find method returns an empty array even for existing data. Here is th ...

javascriptmongodbmongoose

The AngularJS application is experiencing issues with routing back to the homepage using ui-router

I'm experiencing an issue with the ui-routing in my AngularJS app. It was working smoothly before, and I can't recall making any changes that might have impacted the routing. When I start debugging, the app loads correctly with the index navbar ...

javascriptangularjsangular-ui-router

Dynamically showing a div using JavaScript and AJAX after changing the window location

After successfully fetching data from the server through AJAX, I am redirecting to the same screen/URL. Is it possible to show/display a div after redirecting using jQuery? $.ajax({ type: "POST", url: action, data: form_data, success: func ...

javascriptjqueryhtmlcssajax

Creating a clickable table row in bootstrap with optimal effectiveness

Is it better to implement a clickable row using jquery or pure JS? Consider server and client efficiency Ensure compatibility with various browsers The jquery option: // my tr (row) class <tr class='clickable-row' data-href='url:www.g ...

javascriptjqueryperformance

Tips for transmitting `props` information between parent and child components using react router

Looking for guidance on how to properly pass props data from a parent component to a child component when navigating to a new route. I've attempted some solutions from this GitHub issue, but passing it through {...props} didn't work as expected. ...

javascriptreactjsreact-routerreact-props

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...

javascriptnode.jstypescriptjasmine

What makes utilizing v-for distinct from individually placing each item in this instance? Additionally, let's discuss how Bootstrap facilitates content centering

Playing around with my newfound understanding of Vue and Bootstrap, I encountered a puzzling behavior that left me stumped. <div class="col-sm-4" class="text-center"> <p v-html="message"></p> <button v-for="type in playTypes" ...

vue.jsbootstrap-4