我的導航欄有問題。我想做一個完全回應式的網站。現在，除了導航欄之外的所有東西都可以作業。當我嘗試拉伸網站時，導航欄下方的內容保持在中心，但導航欄向左移動。我還希望我的導航欄“固定”并隨頁面滾動。我想看到左側的徽標和右側的選單項，但不知道該怎么做。你能幫我嗎？
談論該頁面：https : //fajferekpl.github.io/fjfr/
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.site-nav {
width: 100%;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
grid-column: 1/4;
grid-row: 1;
color: var(--first-color);
padding: 20px;
}<nav class="site-nav grid" id="header">
<div><a href="#" class="nav-logo">.fjfr()</a></div>
<div class="nav-menu">
<ul>
<li><a href="#welcome">.home()</a></li>
<li><a href="#about">.about()</a></li>
<li><a href="#portfolio">.portfolio()</a></li>
<li><a href="#skills">.skills()</a></li>
<li><a href="#contact">.contact()</a></li>
<li class="icon-navbar"><a href="https://www.github.com/fajferekpl" target="_blank"><i class="fab fa-github"></i></a></li>
<li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun"></li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>uj5u.com熱心網友回復：
我相信這只是一個定位和寬度問題。我以以下內容為中心...
對于固定定位，您必須確保告訴它要定位的位置。將它從左側定位 50%（也就是向右 50%），然后添加一個 transformTranslate 向后 50%（也就是向左 50%）將它居中。這是因為它將它從導航欄的最左角（不是從它的中心）移動了 50%，然后你必須將它向后移動 50% 以使其成為真正的中心。
.site-nav-colored {
width: 100%;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 4px
var(--first-color);
left: 50%;
transform: translate(-50%);
}
此外，導航欄的寬度也受此部分的影響。它最多只能達到 1060 像素。
media screen and (min-width: 950px)
.grid {
width: 100%;
max-width: 1060px;
margin: 0 auto;
}
因此，如果您希望它擴展螢屏的整個寬度，則導航必須位于 HTML 中 的 div 之外。
希望這有幫助:)
uj5u.com熱心網友回復：
我position: relative;在你的.site-nav課上用過將選單內容居中。因為 a 的position: fixed;作業方式與絕對類似，所以您也可以設定top和left樣式以將固定標題對齊到中心。
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
}
.site-nav {
width: 100%;
position: relative; /* Center navbar */
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo {
grid-column: 1/4;
grid-row: 1;
color: var(--first-color);
padding: 20px;
}
/* Fixed navbar on scroll changes */
.site-nav-colored {
width: 100%;
top: 0;
left: 22vw;
position: fixed;
z-index: 99;
background-color: var(--background-color);
height: 5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 4px var(--first-color);
}<nav class="site-nav grid" id="header">
<div><a href="#" class="nav-logo">.fjfr()</a></div>
<div class="nav-menu">
<ul>
<li><a href="#welcome">.home()</a></li>
<li><a href="#about">.about()</a></li>
<li><a href="#portfolio">.portfolio()</a></li>
<li><a href="#skills">.skills()</a></li>
<li><a href="#contact">.contact()</a></li>
<li class="icon-navbar"><a href="https://www.github.com/fajferekpl" target="_blank"><i class="fab fa-github"></i></a></li>
<li class="icon-navbar"><img src="assets/img/sun1.png" id="icon-sun"></li>
</ul>
</div>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353254.html