How to position navbar-nav class element in bootstrap5 exactly center in menu?

Question

In short - I'm writing a backend for an amateur site (I'm also redesigning the frontend), but I don't know much about the frontend, so I use bootstrap5. And I need to transfer the menu from the old version of the site to the new one. It should look like this: I tried to rewrite this in bootstrap, but I ran into the fact that I can't position the logo exactly in the center of the menu: HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <link rel="stylesheet" href="css/private.css">
    <title>IT-Hogwarts | Добро пожаловть в школу чародейства и магии!</title>
</head>
<body>
    <header class="header">
        <nav class="navbar navbar-expand-lg menu">
            <div class="container">
                <button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbar__content" aria-controls="navbar__content" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse menu__elements" id="navbar__content">
                    <ul class="navbar-nav menu__nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Главная</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Уровни магии</a>
                        </li>
                        <li class="nav-link menu-link menu-link_logo">
                            <a class="navbar-brand menu__brand" href="#">
                                <img class="menu-link__img" src="img/hogvarts.png" alt="hogwarts">
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Рейтинг участников</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Личный кабинет</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap');

*{
    padding: 0;
    margin: 0;
}

body {
    font-family: "Comfortaa";
    background-color: #0C1A22;
}

ul, li {
    display: block;
}

.menu {
    background-color: #fbbe3a;
}

.menu__brand {
    color: black;
    font-weight: 800;
    transition: all 300ms;
}

.menu__brand:hover {
    color: #ff6106;
}

.menu-link__img {
    width: auto;
}

.menu__elements {
    justify-content: space-around;
}

.menu__nav a {
    margin-right: 70px;
    color: black;
    font-weight: 600;
    transition: all 300ms;
}

.menu__nav a:hover {
    color: #ff6106;
}

.statistic {
    margin-top: 40px;
}

.line-red {
    background: linear-gradient(to bottom, #C01712 20%, transparent 20%)
}

.statistic p {
    color: white;
}

@media screen and (max-width: 992px) {
    .menu__nav {
        margin-top: 14px;
    }

    .menu-link_logo {
        display: none;
    }
}

How can I place the logo in the center and how can I reduce the height of the menu so that the elements do not move up?

score 0 · Accepted Answer · answered Dec 05 '21 at 05:25

0

you can try this :

.menu 
{
    background-color:transparent;
}
.menu__elements 
{
    justify-content: space-around;
    background-color: #fbbe3a;
    border-bottom-right-radius:50px;
    border-bottom-left-radius:50px;
}

answered Dec 05 '21 at 05:25

Anonymous

539
2
6

It doesn’t solve my problem, because I need to put the logo right in the middle and wrap the text around it. – Hallteon Dec 05 '21 at 05:53

How to position navbar-nav class element in bootstrap5 exactly center in menu?

1 Answers1