問題描述
切換器圖標無法調整導航欄寬度 (Toggler icon does not working on adjusting the navbar width)
我有一個高度更改為 2.5rem 的導航欄,因此切換器未顯示任何菜單項。如果我更改為默認設置,它可以正常工作。現在圖標顯示如下 ‑ 請幫我解決這個問題。
下面是我的代碼 ‑
HTML ‑
<body>
<nav class="navbar navbar‑expand‑lg " id="header‑bar">
<button class="navbar‑dark navbar‑toggler" type="button" data‑
toggle="collapse"
data‑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 mr‑auto">
<li class="nav‑item">
<a class="nav‑link" href="#">ITEM1 <span class="sr‑only">
(current)</span></a>
</li>
</ul>
<ul class="navbar‑nav ml‑auto">
<li class="nav‑item">
<a class="nav‑link" href="#">ITEM2</a>
</li>
<li class="nav‑item">
<a class="nav‑link" href="#">ITEM3</a>
</li>
<li class="nav‑item">
<a class="nav‑link" href="#">ITEM4</a>
</li>
<li class="nav‑item">
<a class="nav‑link" href="#">ITEM5</a>
</li>
</ul>
</div>
</nav>
CSS ‑
*{
box‑sizing: border‑box;
padding: 0;
margin: 0;
}
body {
font‑family: sans‑serif;
font‑size: 16px;
}
nav {
background:#001a33;
height: 2.5rem;
}
.navbar‑nav .nav‑link{
color: white;
}
提前致謝!
參考解法
方法 1:
Adding py‑0 class to the nav tag solves the problem (to adjust height of the navbar). Changing height attribute messes with the hamburger content alignment‑that has to be removed.
(by Itika Bandta、Itika Bandta)