Mixing
Navbar Height Not Readjusting?
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!
html css navbar margin
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
add a comment |
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!
html css navbar margin
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
add a comment |
0
0
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!
html css navbar margin
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
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!
html css navbar margin
html css navbar margin
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
edited Nov 21 '18 at 10:56
Gabor Szekely
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
asked Nov 21 '18 at 10:42
Gabor SzekelyGabor Szekely
1508
1508
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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>answered Nov 21 '18 at 10:58
DannyDanny
8791210
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
add a comment |
0
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410319%2fnavbar-height-not-readjusting%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 21 '18 at 10:58
DannyDanny
8791210
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
add a comment |
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>answered Nov 21 '18 at 10:58
DannyDanny
8791210
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
add a comment |
1
1
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>answered Nov 21 '18 at 10:58
DannyDanny
8791210
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>// 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>// 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>answered Nov 21 '18 at 10:58
DannyDanny
8791210
edited Nov 21 '18 at 15:21
answered Nov 21 '18 at 10:58
DannyDanny
8791210
answered Nov 21 '18 at 10:58
DannyDanny
8791210
answered Nov 21 '18 at 10:58
DannyDanny
8791210
8791210
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
add a comment |
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
That does work, but the only problem is it resizes the image to 100% of it's original size again! Any ideas?
– Gabor Szekely
Nov 21 '18 at 11:04
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
@GaborSzekely Please see my updated answer.
– Danny
Nov 21 '18 at 15:22
add a comment |
0
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
add a comment |
0
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
add a comment |
0
0
0
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
use auto height...
.navWrapper {
position: fixed;
top: 0;
left: 0;
z-index: 3;
width: 100%;
height:auto;
}
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
answered Nov 21 '18 at 10:56
OneJeetOneJeet
962310
962310
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
add a comment |
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
Didn't seem to fix it for me... Any other ideas?
– Gabor Szekely
Nov 21 '18 at 10:58
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53410319%2fnavbar-height-not-readjusting%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
