How to put a search bar at the center of the navigation bar without compromising the responsiveness of the webpage?
Question
I am very new to CSS and HTML so I am facing difficulties while designing a webpage for my school project.
Currently I am trying to insert a search bar at the middle of the navigation bar. However, I am only able to set it at the left or right of the bar. I have found codes in other websites to override the bootstrap css codes and moved the search bar to the middle of the page but when the display screen is smaller, the search bar does not fit in the drop down menu. Webpage view Dropdown Menu view
Here's the html file I am using to design the webpage.
<,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>
Can anyone advise or help me on solving this problem? Thank you!
1 answers
solution1
1 2020-06-14 13:27:42
I think you're asking how to make sure it stays in the top without wrapping around to a new line?
If so the flexbox might be your best friend here. If you use "display: flex" on the parent div it will force everything to stay in one line, unless you use the "flex-wrap: wrap" property. You can then set the width you want each element to take up in this one "row" of content, flex-grow is also a possibility.
Great info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Hope it helps!
Edit after clarification: So to make your search bar move to the next row of content you could still use flexbox and the "flex-wrap:wrap" property on your parent element.
To make your content "wrap" onto the next row with flexbox you just need to make all the content in one row take up a total of 100% width among them or make it so the next element (or parent container) can't fit in the same row: eg
first row: two elements with 33% width each second row: one element with 35% or more defined width [100% - (33% * 2) = 34% width or less will not wrap around]
So you could set your search bar div width to 100% or set your login and register links a larger enough width the search bar won't fit on the row...
or even simpler you could add a line break tag, "<' br '>", before the search bar in your HTML;)
Good luck on your project!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.