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:
e.g.
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!
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:[email protected]&display=swap" rel="stylesheet">
<link href="{{ url_for('static', filename='style.css' )}}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:[email protected]&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!
Nope, I want it to be in another row in the dropdown menu.
I’m just pointing this out but you’ve accidentally put 2 quote marks in the wrong place on the 7th to last line.
Hi sorry for my unclear description, I meant how can I move my search bar in the dropdown view to another row instead of staying in the middle of the Login and Register tabs.
Not sure if you’ll get a notification from me editing the answer or not, or from this comment… hopefully you see it in time though!
Hi, thanks for the prompt help! Can I check how may I try the above mentioned method since I am using a bootstrap link as my stylesheet? Do I override certain methods in my style.css file? I have also tried the
tag before the search bar but it does not seem to help.
You could overwrite the bootstrap styles in your own style.css file as long it’s further down in the cascade than bootstrap, linked to later in the file, or you could make an inline
