Bootstrap navbar flex column on small screen causing odd toggler behavior

HTML & CSS
1

I’m trying to create a navigation bar where on medium or larger screens, the brand, navigation items, and search bar all appear on the same row. However, on small screens, I want the brand and toggler to appear on the same row, but the search bar to be bumped down to the next row.

I’ve gotten fairly close but I’m still getting some odd behavior that I’m not sure how to fix. This is what I’ve gotten so far:

<!doctype html>
<html lang="en">
	<head>
		<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css?ver=6.2.2' type='text/css' />
	</head>
	<body>
		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<div class="container d-flex flex-column flex-md-row">
				<div class="d-flex">
					<a class="navbar-brand" href="#">Site Name</a>
					<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="navbarSupportedContent">
						<ul class="navbar-nav">
							<li class="nav-item"><a class="nav-link" href="#">Item 1</a></li>
							<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Item 2</a>
							<ul class="dropdown-menu">
								<li><a class="dropdown-item" href="#">Subitem 1</a></li>
								<li><a class="dropdown-item" href="#">Subitem 1</a></li>
							</ul>
							</li>
							<li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
						</ul>
					</div>
				</div>
				<div>
					<form class="d-flex" role="search" method="get" action="#">
						<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" value="" name="s">
						<button class="btn btn-success" type="submit" value="Search" >Search</button>
					</form>
				</div>
			</div>
		</nav>
	<script type='text/javascript' src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js?ver=6.2.2' ></script>
	</body>
</html>

This does push the search bar below the other elements. However, it does something weird to the toggler, so that the elements in the toggler control appear next to it instead of below it as expected.

My gut instinct is that this problem is happening because the extra divs are making it so certain elements are no longer the direct children of other elements, but I’m not sure exactly how to fix it.

2

Usually you would place the drop down absolutely on smaller screen or you get a page shift each time.

e.g.

@media screen and (max-width: 992px) {
  .navbar-collapse {
    position: absolute;
    top: 100%;
    background: #ccc;
    left: 0;
    right: 0;
    padding: 10px;
  }
  .navbar-collapse.show {
    position: absolute;
    top: 100%;
    background: #ccc;
  }
}
@media screen and (max-width: 767px) {
  [role="search"] {
    margin-top: 10px;
  }
}

Note you should add your own classes when modifying the bootstrap code rather than using the bootstrap classes.

3

Ah, okay that makes sense and I see how that would work. Thank you for your help! And yep, I understand to make my own classes and not change Bootstrap’s.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.