Navbar is not in the center

Question

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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<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>

Do you have a link to the front-end so we can see an accurate representation of the issue? OR perhaps set up a fiddle. — Kameron, Nov 08 '21 at 21:47
@Kameron I already upload files to show you. Can you check? https://fajferekpl.github.io/fjfr/ — fajferek, Nov 08 '21 at 22:25

score 1 · Answer 1 · edited Nov 09 '21 at 14:32

I believe 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 transform: translate 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 class="grid" in your HTML.

score 1 · Answer 2 · answered Nov 08 '21 at 22:48

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>

Navbar is not in the center

2 Answers2