Header / Flexbox


I’m trying to make my header cover the top of the page and align the nav.items next to eachother.

As you see now, the header is “short” and the nav.items/links, next to the title and logo are stacked:

I tried to play with the flex-direction but couldn’t manage to change the look.

Can anyone see what I’m missing here?

You can give the header width: 100%. As for the links, only the direct children of the flexbox container are flex items. In your case for the #nav-bar that is just the <ul> element and not the <li>s inside it. You can make the <ul> a flex container.

Another question. I am trying to push the nav bar to the main-end. I tried using justify-content: space-between and also space-around but can’t make it work.
Also the page looks very different in Full-page view , I guess its because I haven’t used any media queries yet?

You want the nav links on the right side?

You can use justify-content: flex-end or align-items: flex-end depending on the flex-direction.

If you do it on the nav you have to use align-items: flex-end or remove flex-direction: column from it and use justify-content: flex-end. If you do it on the ul you can use justify-content: flex-end; but you will need to make it full width.

1 Like