How can i resize the logo of my navbar without change my navbar height?-CodePudding

Im trying too turn this logo bigger, but when i change the width and it get bigger, the navbar height turns bigger too, i don't want that, i want it to fit the nav bar better.

Here is the navbar html:

<nav  id="navbar">
            <div >
                <a href="index.html" >
                    <img src="img/logocarol.png" alt="Carol Rocha" >
                    <span>My Project</span>
                </a>    
                <button 
                     
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#navbar-items" 
                    aria-controls="navbar-items" 
                    aria-expanded="false" 
                    aria-label="Toggle navigation">
                    <i ></i>
                </button>
                <div  id="navbar-items">
                    <ul >
                        <li >
                            <a href="index.html"  aria-current="page">Home</a>
                        </li>
                        <li >
                            <a href="quemsoueu.html" >Quem Sou Eu</a>
                        </li>
                        <li >
                            <a href="meuscursos.html" >Meus Cursos</a>
                        </li>
                        <li >
                            <a href="#" >Contatos</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

Here is the navbar css:

#navbar {
    box-shadow: 0px 6px 10px #777;
}

#navbar a:hover {
    color: #7a7a7a;
}

#navbar a {
    color: #FFF;
}

.navbar-brand {
    display: flex;
}

.navbar-brand img {
    width: 40px;
}

.navbar-brand span {
    font-weight: 700;
    font-size: 1.5em;
    margin-left: 0.5em;
    color: #FFF;
}

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

#navbar-items .nav-item {
    margin: 0 1em;
}

Here is the Navbar screenshot:

CodePudding user response：

Try this first. You will probably need to do some additional settings, but for now.

.navbar-brand {
    display: flex;
    position: absolute;
}

CodePudding user response：

Just edit the image and resize the image, 80x80 might work well for you, depends on your navbar size. But just resize your image