Image in Nav Bar and need it to auto adjust height

[Velociraptor]

Hi,

I am using materialize CSS framework.

I want to put image logo in Nav Bar.
Is there a way to make sure the Nav Bar to auto adjust its height to fit the image?

I tried adding min-height to nav-wrapper class. But that cause other elements to slide off from their center vertically.

For testing, I'm using 200x75 px image.

Code Link


Thanks in advance.

[Tumbleweed]

Oct 11, 2017 0:54:33 GMT -8 Velociraptor said:

Hi,

I am using materialize CSS framework.

I want to put image logo in Nav Bar.
Is there a way to make sure the Nav Bar to auto adjust its height to fit the image?

I tried adding min-height to nav-wrapper class. But that cause other elements to slide off from their center vertically.

For testing, I'm using 200x75 px image.

Code Link


Thanks in advance.

I often use line-height to vertically center stuff like that:


.nav-wrapper {
min-height: 75px;
line-height:75px;
}

Seems to do the trick on your code pen.

[Velociraptor]

Thanks. But it didn't work for the icons.
I was hoping you know the code for the icons too
or how to add working "vertical-align: middle" code since it seems vertical align didn't do anything.

[Tumbleweed]

Oct 17, 2017 5:44:26 GMT -8 Velociraptor said:

Thanks. But it didn't work for the icons.
I was hoping you know the code for the icons too
or how to add working "vertical-align: middle" code since it seems vertical align didn't do anything.

How did I miss that? 

Try this: The bolded are the changes to your code pen that really does v center the icons, text and button, at least for me it does viewing in Chrome.

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
line-height:75px!important;
}
.container {
background-color: red;
min-width: 100%;
}
.nav-wrapper {
min-height: 75px;
line-height:75px!important;
}
Oh and you may want to remove the red since what is added is over-riding that.

[Velociraptor]

Perfect !!!

Thank you very much..