0

I have a navbar that is not re-sizing correctly when my logo image gets shrunk. Here is a link to the Codepen page for the complete code:

https://codepen.io/gabor-szekely/pen/JeMqQz

Basically, I am trying to re-size the "Sino Medical" logo image in the top left corner to 80% of it's original size, but when I do so, the entire navbar is not shrinking along with it, and is therefore too tall.

Can anyone help?

Here is the HTML:

<div class="navWrapper">
  <nav class="flex-wrapper">
    <div class="top-row-logo">
    <img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
    </div>
    <div class="top-row-links">
      <ul>
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">Register</a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="login-links">
      <ul>
        <li>
          <a href="#" class="login-button">Login</a>
        </li>
      </ul>
    </div>
  </nav>
</div>

And here is the relevant CSS:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  text-align: center;
  padding: 0 1.5em;
  color: #333;
}

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  border-bottom: 1px solid #c8c8dc;
}

.top-row-logo {
  flex: 1;
}

.logo-img {
  margin-left: 3.2rem;
  height: 80%;    /* THIS IS THE ISSUE! */
}

.top-row-links, .login-links {
  margin: auto 0;
}

.top-row-links {
  flex: 1.5;
  margin-right: 3.2rem;
}

.login-links {
  margin-right: 4rem;
}

Thanks!

Gabor Szekely
  • 1,108
  • 5
  • 14

2 Answers2

1

You could set the .top-row-logo to align-self: center instead of having it set to stretch which it inherits from the parent elements align-items declaration and set the .logo-img to display: block to get rid of the white space below the image.

In regards to setting the height of the element as a percentage value, this isn't possible unless you explicitly set the height of the imgelement's containing block. So for your case, you could do something like below: 

.top-row-logo {
  flex: 1;
  align-self: center;
  height: calc(71px * 0.8);
}

.logo-img {
  margin-left: 3.2rem;
  height: 100%;
  display: block;
}

Or, if you want to be more dynamic you could use some javascript to set the height so even if the height of the image is over 71px it will always render at 80% of its original value.

See below for a demo:

// get the img
let img = document.querySelector(".logo-img");

// retrieve it's height
let imgCSS = window.getComputedStyle(img);
let imgHeight = imgCSS.getPropertyValue("height");
imgHeight = parseInt(imgHeight);

// set the height to 80% of it's original value
let newHeight = imgHeight * 0.8;

// set the height of img element to the new height
img.style.height = newHeight + "px";
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans";
  margin: 0;
  padding: 0;
  font-size: 0.8em;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  text-decoration: none;
  padding: 0 1.5em;
  color: #333;
  transition: color 400ms ease;
}

li a:hover {
  color: #6dacd5;
}

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
}

.flex-wrapper {
  display: flex;
  flex-flow: row nowrap;
  background-color: white;
  border-bottom: 1px solid #c8c8dc;
}

.top-row-logo {
  flex: 1;
  align-self: center;
}

.logo-img {
  margin-left: 3.2rem;
  display: block;
}

.top-row-links, .login-links {
  margin: auto 0;
}

.top-row-links {
  flex: 1.5;
  margin-right: 3.2rem;
}

.login-links {
  float: right;
  margin-right: 4rem;
}


.login-button {
  display: inline-block;
  color: #008fe1;
  font-size: 0.9em;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background-color: white;
  padding: .8em 1.6em;
  border: 2px solid #008fe1;
  border-radius: 4px;
  cursor: pointer;
  transition: all 400ms ease;
}

.login-button:hover {
  background-color: #008fe1;
  color: #fff;
}
<div class="navWrapper">
  <nav id="flex-wrapper" class="flex-wrapper">
    <div class="top-row-logo" id="top-row-logo">
    <img class="logo-img" src="https://img1.wsimg.com/isteam/ip/7bf494f1-7493-4549-b272-842b0d021577/logo/345e441d-0495-4f5b-bd62-f6413ac9b7a5.png/:/rs=h:71" alt="Sino Medical Institute">
    </div>
    <div class="top-row-links">
      <ul class="navbar">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">About Us</a>
        </li>
        <li>
          <a href="#">Services</a>
        </li>
        <li>
          <a href="#">
            Register
          </a>
        </li>
        <li>
          <a href="#">Contact Us</a>
        </li>
        <li>
          <a href="#">FAQ</a>
        </li>
      </ul>
    </div>
    <div class="login-links">
      <ul>
        <li>
          <a href="#" class="login-button">Login</a>
        </li>
      </ul>
    </div>
  </nav>
</div>
Danny
  • 1,083
  • 2
  • 8
  • 12
0

use auto height... 

.navWrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height:auto;
}
onejeet
  • 1,191
  • 6
  • 14