CODEWITHSUNDEEP
htmlcsscss-grid
Jenson Varghese
Jenson Varghese

Reputation: 33

How do I add a logo to the navbar with css grid

Whenever the screen size increases the row height changes and the logo exceeds the height of the navbar. I'm stuck here and can really use some help

HTML

<div class="container">
<div class="navbar">
  <div class="logo-desktop">
    <img src="E:\work\JensonWebsite\images\jenson-logo-desktop.svg" />
  </div>
</div>
<div class="slider"></div>
<div class="gallery"></div>
<div class="brands"></div>
<div class="contact"></div>
<div class="footer"></div>
</div>

CSS

.container {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(12, 1fr);
}

.navbar {
display: grid;
padding: 6px;
background-color: #0E1848;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 100px;
align-items: center;
justify-content: center;
}

Upvotes: 1

Views: 1519

Answers (1)

DadyByte
DadyByte

Reputation: 914

If you want the image to change height according to the row then add css something like this:

    img {
        width: 80%;
        height: 100%;
    }

But if you want fixed image then use fixed height and width like:

    img {
        width: 200px;
        height: 60px;
    }

Upvotes: 1

Related Questions