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
John Weland
42,478 PointsNav with a toggle?
So I am wanting to create a navbar that is responsive. I have a "logo" and then some navigation links. I am using flex-box to get the layout all swanky and pretty. Currently I have the "logo" as the first list item (flex-tem) in the flexbox and have it set with a margin-right of auto to separate it from the list of links
<header>
<nav class="navbar">
<ul class="nav">
<li class="nav__item">Logo</li>
<li class="nav__item"><a href="">Home</a></li>
<li class="nav__item"><a href="">Portfolio</a></li>
<li class="nav__item"><a href="">Code Lab</a></li>
<li class="nav__item"><a href="">Technical Blog</a></li>
<li class="nav__item"><a href="">Contact</a></li>
</ul>
</nav>
</header>
.navbar {}
.nav {
padding:0 1em;
display: flex;
flex-direction: column; /* row, row-reverse, column, column-reverse */
justify-content: space-between; /* flex-start, flex-end, center, space-between, space-around, inherit */
flex-wrap: wrap; /* nowrap, wrap, wrap-reverse, inherit */
}
.nav__item {
list-style: none;
margin-left: 1em;
padding:.7em;
flex-grow: inherit; /* value is a +/- int , or inherit.*/
align-self: stretch; /* auto, flex-start, flex-end, center, baseline, stretch */
}
.nav__item a {
text-decoration: none;
}
.nav__item:first-child {
margin-right: auto;
margin-left: 0;
}
.nav__item:hover {
background-color: orange;
}
@media screen and (min-width: 495px) {
.nav {
flex-direction: row; /* row, row-reverse, column, column-reverse */
}
}
I think I am going to have to move the logo outside of the nav ul and make the logo and the ul flex-items of their parent. Currently in mobile view list items display in a column. but once I add a toggle feature so common in other mobile layouts its going to hide the logo as well.
Just looking for some feedback as to the best way to tackle this.
2 Answers
TJ Egan
14,420 PointsYeah, I was going to suggest what you already seem to have thought of; removing the logo from the ul and them (the UL and Logo) be siblings.
Twitter Bootstrap has a great way of implementing the nav bar collapse, which sounds like would be what you are looking for. Take a look at their documentation here: http://getbootstrap.com/components/#navbar
John Weland
42,478 PointsHere is what I've got thus far. It still seems so bloated.
John Weland
42,478 PointsGuil Hernandez , any thoughts buddy?
John Weland
42,478 PointsJohn Weland
42,478 PointsBootstrap IS actually what I'm going for but flex-box based and BEM named. Essentially I want to end up with the same thing visually.
The question is how though, bootstrap is pretty complex in that any little item in bootstrap has tons of code scattered across a huge stylesheet to make it work.
TJ Egan
14,420 PointsTJ Egan
14,420 PointsYeah I agree. It's always a pain to style some elements in Bootstrap, but DevTools helps. I haven't gotten to the flex-box section yet, and have only been able to achieve this via Bootstrap.
This is how I've styled Bootstrap pages to my likings: https://bootstrapbay.com/blog/customize-bootstrap/
Cheers!