Navbar is not in the center-CodePudding

I have a problem with my navbar. I want to make a fully responsive website. For now, everything besides the navbar works. When I try to stretch the website, the content below the navbar stays at the center, but the navbar is moving to the left. I also want my navbar to be "fixed" and scroll with the page. I would like to see the logo to the left and menu items to the right, but not sure how can I do that. Can you help?

Talking about that page: 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>

CodePudding user response：

I beleive it is just a positioning & width issue. I centered it with the following...

With fixed positioning, you have to be sure to tell it where to be positioned. Positioning it 50% from the left (aka 50% to the right), but then adding a transformTranslate back 50% (aka another 50% to the left) will center it. This is because it moved it 50% from the far left corner of the navbar (not from the center of it), and then you have to move it 50% backward to make it true center.

.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%);
}

Also, the width of the nav bar is being affected by this section. It can only go up to 1060px.

media screen and (min-width: 950px)
.grid {
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
}

So, if you want it to extend the full width of the screen then the nav would have to be outside of the div with in your HTML.

Hope this was helpful :)

CodePudding user response：

I used position: relative; on your .site-nav class to center the menu contents. Because a position: fixed; works similarly to absolute you can set top and left styles to align your fixed header into the center also.

.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>