I'm having some problems creating a header. Here, my ul is not using the full height of the nav, but the nav IS using the full height of the header. I want to fix this in order to center vertically the text. Thank you.
(edit) When I use height: 100%; on the ul, this happens.
This is my HTML:
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>
This is my SASS:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
Here is a solution for this. Just add line-height: 75px; to the li elements and set the ul element's margin to zero by adding margin: 0px;.
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: #000;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
header .logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
header nav {
width: 50%;
padding-right: 50px;
}
header nav ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
margin: 0px;
}
header nav ul li {
display: inline-block;
margin-left: 50px;
line-height: 75px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
}<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>However I converted your SASS code into CSS to run it on the stack overflow code snippet runner. You can change this to SASS again if you want.
Thanks and best regards!
Its probably because you did not reset the margin for the ul tag and also apply a 100% percent height to it also.
$BLACK: #000;
$WHITE: #fff;
* {
box-sizing: border-box;
// margin: 0;
// padding: 0;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
background: red;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
background: orange;
height: 100%;
li {
display: inline-block;
margin-left: 50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}<header>
<div class="logo">
<img src="https://via.placeholder.com/20x20.png/09f/fff" />
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORKS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>Please update your css with following code:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
height: 100%;
display: flex;
align-items: center;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
flex: 1 0 auto;
align-self: stretch;
align-items: center;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}