How do I use flexbox to move my navbar to the left?

Code Feedback
1

Hi
I’m trying to move my navbar to the left of my page in the product landing page project. I’m still in the process of building it, and this is what I’ve done so far.

I tried using flex box, so that the nav and the main would be in the column all in the body, but that wasn’t working:

#body {
    display: flex;
    flex-direction: column;
}
#navbar {
    width: 25%;
}

#main-doc {
    width: 75%;
}

Is there a reason why this is not working? Or is it because I can’t use flex-box with nav and main?

2

Hei @maameyaatwumasi,

if i do undestand you right.
I think the simplest way to do it is by changing the flex-direction propertie from column to row.

Here some resources that helped me with flexbox:

and also Kevin Powell (awesome dude)

hope that helps!

bw,
A

EDIT: P.S. you wrote landing page but linked the tech-doc page is this on purpose?

3

Thank you for the correction. I had tried other ways before using flex-box, and I forgot to change it to row. I also meant to link it to the technical page. I’m sorry for the petty mistakes

4

Don’t be sorry, happens. Didn’t meant to point it out to shame, just wanted to be clear myself :slight_smile:

Glad that i could help.
Happy coding!

1 Like
5

Can you help with one more thing with this same project? I’m trying to add a scroll, and after some research I used overflow. But when I add overflow: scroll; to add a scroll to the navbar, the bar for scrolling appears, but the scroll itself doesn’t appear.

6

Sure, will try.

What i noticed is that, if you reduce the a-tags in your navbar, the navbar shrinks. So i assume that by adding more it expands outside the viewport. Which means that overflow is set to scrolling but it is not seeing any overflow to actually scroll.

Try limiting the height of your navbar.

I would like to explain it to you in correct terms, but i can’t yet. Maybe someone comes around and explain it in html and css related terms.

P.S.: looks good so far

7

All I had to do as you said was to add a height to the navbar ( under the navbar id I just added height: and give it a height in pixels. Thank you very much!

8

Could you help with one more thing? I’m supposed to use media queries, and I want to use it to move the nav bar on top when the width is smaller. So I thought using flex box, I’d change the flex-direction to column under the media query, but that didn’t work.

Is it because I made t fixed, or there’s a different reason?

9

Hei @maameyaatwumasi,

yeah i think you are right. It’s due the position fixed attribute.
You can change the position attribute or keep it fixed and change the appearance inside the querie.

hope that helps.

bw,
A

1 Like
10