Streaming live at 10am (PST)

How to right justify child element inside parent navbar?

Hi all,

I’m brand new to Webflow and have just gone through the flexbox video tutorial. I’m still struggling with a basic task however.

The gist: I have a navbar. In that navbar I have my main title (Handmade Homes) and a button (Get Handmade). I’d like to center the main title, and right justify the button. I simply can’t get this to work.

Here’s what I’ve tried:

  • Made the main title header and button as child elements of the navbar. In the navbar settings, I enabled flexbox centering (so that by default all child elements are centered). And then I attempted to override this on the button by setting it to right justify (in Layout > Justify). However this doesn’t do anything, and as you can see the button is still centered within the navbar.

Please help!

Link: https://preview.webflow.com/preview/pradhiths-marvelous-project?utm_medium=preview_link&utm_source=designer&utm_content=pradhiths-marvelous-project&preview=e12432d347381f48c4a87b4d4df18b70&mode=preview

Hi and welcome :webflow_heart:

Thanks you for sharing. Basically you should add A DIV WRAPPER set to relative, place the title inside this div. the button should be absolute and stick to the right.

1 Like

Thanks so much - this video answer format is really cool and helpful! One issue I notice is that when I change the viewing device to something else (i.e. phone or tablet), the “Get Handmade” button no longer stays contained within the navbar. Do you know how I would resize this element dynamically?

Happy to help :slight_smile:

Let Me know if that is what You are looking for.

Yes, exactly what I was looking for! Do you happen to have the webflow link? Thanks!

Hi

Do you want me to prepare for You “how to” video?

A “how to” would really be appreciated! If it’s too much work, then hopefully I can also infer what changes were made by looking at the webflow link that you added these changes to. Thanks