Navbar is not in the center [duplicate] - html

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
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>.fjfr()</div>
<div class="nav-menu">
<ul>
<li>.home()</li>
<li>.about()</li>
<li>.portfolio()</li>
<li>.skills()</li>
<li>.contact()</li>
<li class="icon-navbar"><i class="fab fa-github"></i></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

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>.fjfr()</div>
<div class="nav-menu">
<ul>
<li>.home()</li>
<li>.about()</li>
<li>.portfolio()</li>
<li>.skills()</li>
<li>.contact()</li>
<li class="icon-navbar"><i class="fab fa-github"></i></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 2

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.