ブラウザを縮めた際ヘッダーの内容をシームレスに縮小させたい

Question

ブレイクポイントに関わらず縮小に応じてヘッダーの内容をシームレスに収縮させたいのですが、どうもうまくいかず困っております。画像をご参照ください。

●xl

↓　↓　↓

●lg～md

↓　↓　↓

●sm

また最小サイズにした際、下記のようにメニューボタンと検索を横並びにさせたいです。

本当はハンバーガーメニューにしたいのですが、罫線が1本しか表示されずボタンの形にしてます。
三本線の下に「MENU」のテキストも入れたいです。
ちなみにbootstrap4です。ご教示いただけると幸いです。よろしくお願い申し上げます。

	<div class="row modal-header">
		<div class="row col-md-10 offset-md-2 col-lg-10">
			<div class="col-md-auto col-lg-auto">
				<a href="index.html"><img src="images/large_logo.png" width="100%" alt="large_logo"></a>
			</div>
			<div class="col-md-5 col-lg-6 col-sm-5">
				<div class="col-md-3 col-sm-3 col-3">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navmenu">
						<span class="navbar-toggle-icon">
							<span class="navbar-text" style="font-size: 0.3rem;">MENU</span>
						</span>
					</button>
				</div>
				<div class="col-md-7 col-lg-10 col-sm-10 col-12" style="display: inline-block;">
					<form class="form-inline my-2 my-lg-0">
						<input class="form-control mr-sm-2" type="search" placeholder="サイト内検索" aria-label="Search">
						<button class="btn my-2 my-sm-0" type="submit">検索</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- Start Header Navigation -->
	<nav class="navbar navbar-header navbar-expand-lg">
　　　　　　　(中略)
	</nav>

/*   nav   */

.navbar {
	background-color: #2E3091 !important;
	text-align: center;
	width: 100%;
	font-size: 0.9rem;
	padding: 0;
}


.nav-item a:link {
	color: #000;
}

.nav-item a:hover {
	color: #bba700 !important;
}

.nav-item .dropdown-item a:link {
	color: #000000;
}

.nav-item .dropdown-item a:visited {
	color: #000000;
}

.btn {
	background-color: #2E3091;
	border-style: none;
	color: #fff;
}

/*   min-width: 992px   */

@media screen and (min-width: 992px) {
	.navbar-toggle {
		display: none;
	}

	.collapse {
		display: block;
	}
}



/*   min-width: 768px   */

@media screen and (min-width: 768px) {
	.form-control {
		width: 80% !important;
	}

}


/*   max-width: 578px   */

@media screen and (max-width: 578px) {
	.form-control {
		width: 60% !important;
		padding: 5px;
		margin-right: 5px;
	}
}

Comments

[kei344]

主語がありません。何をシームレスにどうしたいのでしょうか。

[pixiewired]

申し訳ございません。修正しました。

Answer 1

リファレンスを確認して対処できました。申し訳ございません。