導航欄不在中心

Question

我的導航欄有問題。 我想做一個完全響應式的網站。 現在，除了導航欄之外的所有東西都可以工作。 當我嘗試拉伸網站時，導航欄下方的內容保持在中心，但導航欄向左移動。 我還希望我的導航欄“固定”並隨頁面滾動。 我想看到左側的徽標和右側的菜單項，但不知道該怎么做。 你能幫我嗎？

談論該頁面： 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>

Answer 1

我相信這只是一個定位和寬度問題。 我以以下內容為中心...

對於固定定位，您必須確保告訴它要定位的位置。 將其從左側定位 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 中 class="grid" 的 div 之外。

希望這有幫助:)

Answer 2

我使用position: relative; 在您的.site-nav類.site-nav菜單內容居中。 因為一個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>