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

Question

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 navbar better.

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:

Navbar Screenshot

I've changed the #navbar-brand img with "position: absolute" atribute like it was advised me, and after i just resized the width via CSS until it fit better the navbar. I've also saved the image again with a closer zoom to make the logo clear and sharpper.

Here is the edited css:

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

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

Here is the result:

Edited Navbar Screenshot

Answer 1

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

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

Answer 2

Here is a minimal example of how this can be achieved. I've excluded your bootstrap styling for the sake of brevity.
You can click "Run code snippet" below to preview it here on StackOverflow!

Side note:
This is a trivial problem, so I assume you're relatively new to web development? If so, I highly suggest you avoid CSS frameworks (such as bootstrap) until you have a firm grasp of vanilla CSS. You may find you don't need a framework at all. I'm a senior engineer and I never use a CSS framework for my personal projects. In fact, I don't even use one at my work :)

Some resources you may find useful:

• The basics of CSS grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
• The CSS box model (this is vital to understand): https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
• Inline vs. block elements:
  • Inline: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
  • Block: https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

 body, html { margin: 0; padding: 0; } #navbar { box-shadow: 0px 6px 10px #777; background: #d66cbf; color: #fff; display: grid; grid-template: 1fr / auto 1fr; place-items: center; height: 100px; padding: 0 1em; } #navbar .logo { display: flex; align-items: center; font-size: 1.5em; font-weight: 700; } #navbar .logo img { /* Notice that I've used height instead of width. This has the same effect, but it's easier to match the height of the navbar if the logo is not a perfect square. */ height: 100px; margin-right: 0.5em; } #navbar a { color: inherit; text-decoration: none; } #navbar .nav-link:hover { color: #7a7a7a; } #navbar ul { display: flex; justify-content: center; width: 100%; list-style: none; } #navbar .nav-link { margin: 0 1em; }

 <nav id="navbar"> <a href="index.html" class="logo"> <img src="https://i.stack.imgur.com/ERspW.png" alt="Carol Rocha"> <span>My Project</span> </a> <ul> <li> <a href="index.html" class="nav-link">Home</a> </li> <li> <a href="quemsoueu.html" class="nav-link">Quem Sou Eu</a> </li> <li> <a href="meuscursos.html" class="nav-link">Meus Cursos</a> </li> <li> <a href="#" class="nav-link">Contatos</a> </li> </ul> </nav>

Answer 3

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