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

CSS

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Can't do navbar.

HI,

If you look at this site , I need to make mobile to have the logo, and show the bar and the nav, which I do. if you go from mobile first, that's prefect.

WHere is the problem is if you scale it to desktop, and you can see that the logo is left, the nav is in teh center, but the social icons, social icons are right on a separate line.

I have tried everything I could think of to solve this, how can i achieve this, without using a grid in the navigation?

I don't want to use grid system in the nav. See an alternative way.

I tried inline block on the nav, which makes the social icons on the same line, but then i can't center the navigation.

So on mobile it should have logo on left, like it is, hamburger menu on right, like it is, and navigation aligned center, like it is. On desktop, the logo on left, the navigatino in the center of the page, and the social icons on the right on the same line.

EDIT:

The class 

.header__menu

If you go on it on the cdoe and then go on

.header__share

You can see that header_share is not floated on the same line as header_menu.

The header__share icons, should touch the top of the browser ,thats' when it floated.

Now, there is a float that unables header__share to go top, and I can't clear it.

I need to overcome that.

4 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Okay, my solution in as few moves as possible with what you have here.

  1. Move the header__share div to be a direct child of header__menu nav.

Which means, your html should be 

<nav class="header__menu">
  <ul class="nav-block"> . . . </ul>
  <div class="header__share> . . . </div>
</nav>

  1. Add a new rule .nav-block { display: inline-block; };

  2. Add a new rule .header__share { line-height: 50px; };

  3. Profit

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

What would you recommed to do in this situation? here

I think I tried few stuff you wrote here, or I'm losing my self again : d that's a menu I need to practice for sure : d

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

OK I DID IT! FOr the second time! Thank you for the 1000th time! If you had ads on your post you would be a millionaire by now lol (unless you're already one).

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

But anywas, what do you think about the menu i did in the new menu? I did a hand written clearfix 

.site-header {
    background-color: #f4f4f4;
    @include m(info) {
        content: "";
        display: table;
        clear: both;
        width: 100%;
        @include mq(medium-up) {
            display: block;
            clear: none;
        }
    }


}

And then i removed it display block clear none..

Overall.

Is the HTML good? Properly made? And the CSS, at least here.

Men, at least I know what 'work experience is' in the industry now. No matter how many headers I make, there are always new styles and stuff to do that you probably didn't experienced, but more experience the better.

I'm sure if I was to get a job now, it would be a very steep curve in learning.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

Have you tried using flex-box?

Check this pen out :

http://codepen.io/owaaquino/pen/ONeRMM

Cheers!

Owa

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I don't want to use flex-box : p I have a challenge her so i need to solve it

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

I agree, challenges aside, flexbox would be the best solution here.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

xd though the purpose of this site is for me to understand better and more CSS, though I could use a grid system for that, that's one way, id look for alternative : p

But, well, I suppose I can try and do it flex-box way.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Wouldn't using flexbox be understading "better and more CSS", I think it would. Regardless, I'll post my answer to keep your same code

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Well, yes, you are right, but flexbox is a lot easier than just 'plain css', I mean, heck, we can use new properties to make collumns, that won't give me that much knowledge on how to actually make it the 'old/modern days' lol I don't know how to reffer to this. 

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

lol

Flexbox is another topic I will need to learn fully to understand all of it, as I know it's not AS easy since i used it a little bit before, there are few challenges using flexbox, or maybe im jsut too knew and don't know how to do it the flex way lol

But thanks :D I will look at the code soon

Joe Schultz
Joe Schultz
6,191 Points
Joe Schultz
Joe Schultz
6,191 Points

Try the inline block on the nav again, but add the following to ul for the social icons:

<ul class="social_header-icons header_share">

The header_share class should float the icons to the right.
I'm not quite sure this will work, but I hope it gets you in the right direction.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

The icons are floated to the right already : p

Jon Feldman
Jon Feldman
5,339 Points
Jon Feldman
Jon Feldman
5,339 Points

Looks fine to me, My problem is that the navbar turns completely vertical at 500px.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

xD that's how it supposed to be but it's sovled btw :D