Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Aurelian Spodarec
10,801 PointsAligning left, center and right - Navigation
HI,
I know I posted this somewhere else, though, because I'm making this clean etc.. I'd like, how would you go on about this, without using flexbox, just pure CSS, no frameworks.
Pure CSS.
How do you align all of the items together?
2 Answers
Jennifer Nordell
Treehouse TeacherHi! I'm sorry, but I'm a bit confused about the question. You want to align all the items including the nav bar horizontally or vertically? And I don't really understand the aversion to flexbox. It isn't supported in some older browsers, but support for updated browsers is largely supported. Also, flexbox is "pure" CSS. It is natively understood in browsers that support it. You can find more information about flexbox by viewing the MDN documentation.
But what I believe you mean is how to align all the items vertically inside the header. I can highly suggest this page which will show you exactly what you need to do to get this to work using only CSS and with the information you have about the elements in question.
Hope this helps!
Aurelian Spodarec
10,801 PointsI solved it in a way.
// ==========================================================================
// #c-navigation
// ==========================================================================
.c-mainNavigationPanel {
@include m(header) {
content: "";
display: table;
clear: both;
width: 100%;
@include mq(medium-up) {
clear: none;
width: auto;
display: inline-block;
float: left;
}
}
@include m(logoContainer) {
float: left;
@include mq(medium-up) {
}
}
@include m(logo) {
max-width: 160px;
height: auto;
}
@include m(mobileMenuButton) {
float: right;
@include mq(medium-up) {
display: none;
}
}
@include m(menuContainer) {
@include mq(medium-up) {
text-align: center
}
}
@include m(item) {
@include mq(medium-up) {
display: inline-block;
}
}
@include m(menuAccount) {
display: none;
@include mq(medium-up) {
display: block;
float: right;
}
}
}
<!-- HEADER
================================================== -->
<header class="l-siteHeader l-clearfix">
<div class="l-container">
<div class="c-mainNavigationPanel l-clearfix">
<div class="c-mainNavigationPanel--header">
<div class="c-mainNavigationPanel--logoContainer">
<a href="">
<img src="assets/img/learnX__logo--black.png" class="c-mainNavigationPanel--logo">
</a>
</div>
<div class="c-mainNavigationPanel--mobileMenuButton">
<span class="fa fa-bars"></span>
</div>
</div>
<nav class="c-mainNavigationPanel--menuAccount">
<ul class="l-mainMenu">
<li class="l-mainMenu--item"><a href="">Join</a></li>
<li class="l-mainMenu--item"><a href="">English</a></li>
</ul>
</nav>
<nav class="c-mainNavigationPanel--menuContainer">
<ul class="l-mainMenu">
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">App</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">Blog</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">FAQ</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">Contact</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item is-desktop-hide"><a href="">Join</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item is-desktop-hide"><a href="">English</a></li>
</ul>
</nav>
</div><!-- /c-mainNavigation -->
</div><!-- /l-container -->
</header>
Aurelian Spodarec
10,801 PointsWhile the code before was :
<!-- HEADER
================================================== -->
<header class="l-siteHeader l-clearfix">
<div class="l-container">
<div class="c-mainNavigationPanel">
<div class="c-mainNavigationPanel--header">
<div class="c-mainNavigationPanel--logoContainer">
<a href="">
<img src="assets/img/learnX__logo--black.png" class="c-mainNavigationPanel--logo">
</a>
</div>
<div class="c-mainNavigationPanel--mobileMenuButton">
<span class="fa fa-bars"></span>
</div>
</div>
<div>
<nav class="c-mainNavigationPanel--menuContainer">
<ul class="l-mainMenu">
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">App</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">Blog</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">FAQ</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item"><a href="">Contact</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item is-desktop-hide"><a href="">Join</a></li>
<li class="l-mainMenu c-mainNavigationPanel--item is-desktop-hide"><a href="">English</a></li>
</ul>
</nav>
<nav class="c-mainNavigationPanel--menuAccount">
<ul class="l-mainMenu">
<li class="l-mainMenu--item"><a href="">Join</a></li>
<li class="l-mainMenu--item"><a href="">English</a></li>
</ul>
</nav>
</div>
</div><!-- /c-mainNavigation -->
</div><!-- /l-container -->
</header>
// ==========================================================================
// #c-navigation
// ==========================================================================
.c-mainNavigationPanel {
@include m(header) {
content: "";
display: table;
clear: both;
width: 100%;
@include mq(medium-up) {
clear: none;
width: auto;
display: inline-block;
}
}
@include m(logoContainer) {
float: left;
@include mq(medium-up) {
}
}
@include m(logo) {
max-width: 160px;
height: auto;
}
@include m(mobileMenuButton) {
float: right;
@include mq(medium-up) {
display: none;
}
}
@include m(menuContainer) {
@include mq(medium-up) {
text-align: center
}
}
@include m(item) {
@include mq(medium-up) {
display: inline-block;
}
}
@include m(menuAccount) {
display: none;
@include mq(medium-up) {
display: block;
float: right;
}
}
}
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsHi :)
Thank you :)
Yes, horizontal. That link to CSS trick, is a bit too general, it doesn't help what I got here.
I don't know, I'm 'that' guy, that doesn't like flexbox lol It's fine to do some things, I just feel flexbox takes away all the fun when doing CSS. Though again, it's fine to do it sometimes.
Browser support on flexbox is pretty good, though on ie11 it's partially supported, i want to make it to support at least ie9. Plus learn how to do it this way :) there's not magic on how to do it with flexbox.
One element is floated to the right, the other aligned center, and the third floated to the left. The page you send me, doesn't quite explain that. The margin 0 auto doesn't work either. :p