Issue
I am trying to create a header bar with logo on the right, horizontal navigation on the left as usual. I need navigation items to be centered to the logo vertically.
I have tried several methods. I would appreciate if someone could show me the way around and explain why it worked, and what I was probably missing.
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="img/ahlogo.png" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#thoughts">Thoughts</a></li>
<li><a href="#contact">Contact</a></li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Thank you very much!
Solution
I suppose you want to align the navigation to the bottom end of the logo? If yes, you can use display:flex
with the following settings on the parent element of both:
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#thoughts">Thoughts</a></li>
<li><a href="#contact">Contact</a></li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Alternatives: If you want to center-align them vertically, change align-items:
to center;
(or to top
for top alignment)
body {
max-width: 995px;
margin: 0 auto;
padding: 20px 0;
box-sizing: border-box;
font-family: 'Arial';
}
.nav.group {
display: flex;
justify-content: space-between;
align-items: center;
}
a {
text-decoration: none;
color: #222;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.logo img {
max-width: 235px;
height: auto;
float: left;
}
.menu li {
display: inline-flex;
padding-left: 30px;
}
.menu {
float: right;
}
.nav {
padding-bottom: 25px;
}
.group:after {
content: "";
display: table;
clear: both;
}
<div class="nav group">
<div class="logo"><img src="http://placehold.it/120x120/0af" alt="Abdulla Hussain's Logo"></div>
<div class="menu">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#thoughts">Thoughts</a></li>
<li><a href="#contact">Contact</a></li>
<li><i class="fa fa-facebook social" aria-hidden="true"></i></li>
</ul>
</div>
</div>
Answered By - Johannes Answer Checked By - Timothy Miller (PHPFixing Admin)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.