Streaming live at 10am (PST)

Question on alignment in Navbar

#1

The way I learn is to ask WHY things aren’t happening as I think they should…

With that being said, if I increase the fixed height of the navbar to say 200 pixels.

Is there a reason elements (divboxes/linkboxes) inside my navbar won’t align to the top (Start) or bottom (End) but they WILL align to the left or right of the navbar?

Is it something to do with some special property the Navbar has?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

#2

You can achieve this by setting the navbars container display to “Flex” and it’s position to “Relative”. This will give its direct children more options to be positioned as you’d like. That’s what is great about Flex. Tip though… next time provide your Read-only link to your project so we can actually get into it and better help you with a more narrow answer or recommendation. Cheers!

-Noah

#3

Thank you for the response Noah!

Unfortunately I can’t seem to get this to work as expected.

The Navbar was already set to ‘Flex’ and yet the Children 3 divboxes (‘Brand’, ‘Middle Nav’ and ‘Right Nav’ won’t move when I try to ‘align’ them to the top or bottom of the navbar that they’re inside.)

It works left or right but not top or bottom.

P.S. I know I could achieve much the same result by decreasing the padding of the nav bar but the point is I’d really like to know why it doesn’t work this way so I can better understand webflow in general.

Thanks again Noah!

Here’s the read-only:

https://preview.webflow.com/preview/marshmallo?utm_source=marshmallo&preview=38e2d30e6fbf890429e9dc85b669d3d1

#4

Hopefully watching this will help you: https://www.useloom.com/share/531d1b3478f941a4b571d024c0e37c59

I couldn’t record audio because I’m at work, but you can see what I am doing!

#5

Noah, I wanted to thank you for taking the time to do this for me.

I have figured out my problem (in case anyone new to web design/webflow comes across this in the future).

What it was (for me at least) was that I didn’t realise the following:

  • If when aligning the children of a section it doesn’t move left or right (justify) it’s probably because you’ve used a Webflow container which is of course forced in the centre so it won’t move.

  • If there’s no container and when aligning the children of a section it doesn’t move up or down or left or right it means there’s an overriding up or down / left or right alignment on a child element within that section.

I THINK this is where I was going wrong and clicking align or justify was just doing nothing to the children elements within the section (Nav Bar).

Thank you again Noah anyway!