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
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.