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.

https://www.loom.com/share/02c6d8f32c4148debcc91a47e669b0f2

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.

https://www.loom.com/share/54e5d76799da43b8bffccd0181de4add

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

https://www.loom.com/share/21b258612e034a0f9f64f25838eda75b