How to center an image when the navigation bar shrinks?

Question

I am using a template to build the website (https://github.com/learning-zone/website-templates/tree/master/victory-educational-institution-free-html5-bootstrap-template), the original The navigation bar looks like this:

Before shrinking: Navigation bar

After minification: Navigation bar

I changed the logo to my logo. Since my logo is smaller vertically, I changed the margins from 10px to 20px

.logo {
    width: 40%;
    margin: 20px 0px 20px 0;
}

It looks centered: Navigation bar

But when I scroll down the page, the navigation bar shrinks and my logo doesn't stay vertically centered. It moves up. Navigation bar

I tried to fix the css, but it didn’t work

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    margin: 20px 0px 20px 0;
}

This is the html code of the logo

<div class="logo smooth-scroll">
    <a href="#banner"><img id="logo" src="images/boxinghub.png" alt="boxinghub logo"></a>
</div>

The code in the css controls the position when zoomed out, but even if I add .logo or #logo, it doesn't help.

@media (min-width:768px) {
    .fixed-header-on .navbar-default .navbar-nav > li > a {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}

Thanks in advance for your help!

Answer 1

You can use the background method Like background-position:center