How to center elements of a navbar

Question

Hello ! I can't manage to center my different links in the center of my navigation bar: I'd like it to be really centered so that I can place things like my social networks or other things to the right of these elements

So I tried flexbox to center my elements, after many attempts and days of thinking about how to do it, I come here in the hope that someone will explain me how to do it, I would like to understand where the problem comes from please

I attach below my code:

Codepen : https://codepen.io/antyss77/pen/yLMPOPj

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>
<body>
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>

        <nav>
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
        </nav>
    
    </header>

    <h1>The Perfect Discord Bot.</h1>
    <h5>Poseidon is the only Discord bot you'll ever need!</h5>
</body>
</html>

CSS :

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.topbar nav {
    display: inline-block;
    text-align: center;
}


.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

A jsfiddle or codepen would be better. So ppl (like me) browse on a mobile phone, can’t do much with your source code attachment. — hackape, May 30 '21 at 00:46

score 1 · Accepted Answer · answered May 30 '21 at 01:23

This answer assumes you want to center your links but not your logo or other contents of your <header>.

You have the <header> flexbox set to be justify-content: space-between. That's great; it means you just have to add one more child element to it. Then the first element (logo) will be at left, the <nav> links will be at center, and the third element will be at right. You can add an empty <div></div> for now; you'll want to put all your right-side items within this element.

This won't actually provide perfect centering, since the widths of the three child elements vary. You can fix that with something like this (depending on actual layout needs):

.topbar > :first-child,
.topbar > :last-child {
  flex-basis: 25%;
}

You have a few unnecessary bits left in your CSS from experimenting, mostly copies of text-align: center. You'll need to remove some of those to prevent the logo from being centered within its area, for example.

score 0 · Answer 2 · answered May 30 '21 at 01:19

If you need to align center logo and nav links you can do it

.topbar {  
    justify-content: center;  
    width: 100%;
}

to add width: 100%; and to change justify-content: center;

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgb(0 0 0 / 5%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.topbar nav {
    display: inline-block;
    text-align: center;
}


.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">

</head>
<body>
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>

        <nav>
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
        </nav>
    
    </header>

    <h1>The Perfect Discord Bot.</h1>
    <h5>Poseidon is the only Discord bot you'll ever need!</h5>
</body>
</html>

Thank you but the logo must remain on the left, and I must be able to add on the right my social networks all on the same line preferably, is it possible please? — KalypsoTek, May 30 '21 at 01:25

score 0 · Answer 3 · answered May 30 '21 at 01:25

Your code is actually good. For the .topbar class, you used justify-content: space-between;. That will try to stretch the items inside the element as much as possible. Since you have only 2 elements inside (logo image and navigation bar) it will position one all the way to the left and the other all the way to the right.

But, since you want navigation bar to be centered and you want to add social networks to the right, all you have to do is to add one more div after navigation bar and put all social networks there. Since now you have 3 items, logo image will be position all the way to the left, navigation bar will be centered and social networks will be position all the way to the right.

Here is the working code: https://jsfiddle.net/oqc951jd/13/

Thank you for the explanations and for your help I understood everything :D — KalypsoTek, May 30 '21 at 01:35

score -1 · Answer 4 · answered May 30 '21 at 01:47

two simple flex boxes should do the job.

flexbox one : topbar this one splits the topbar into two parts. first part holds the brand image and name. the second part holds the nav links.

 .topbar{
    display  : flex;
    justify-content : flex-start;
    align-items : center;
    text-align : center;

     }

flexbox two : .topbar nav this one takes 100% space on the right allocated for it and places all the links at center.

 .topbar nav {
    display: flex;
    justify-content : center;
    align-items : center;
    width: 100%;
  }

How to center elements of a navbar

4 Answers4