How can I left align the jumbo heading with the top left logo in Webflow?

Published on
September 22, 2023

To left align the jumbo heading with the top left logo in Webflow, you can follow these steps:

  1. Open your Webflow project in the Designer.
  2. Select the section or div block that contains the jumbo heading and the logo.
  3. In the right sidebar, click on the Layout tab.
  4. Under Positioning, set the Position field to Relative. This will allow you to position the elements within the parent container.
  5. Click on the jumbo heading element and go to the Styles tab in the right sidebar.
  6. Under Positioning, set the Position field to Absolute. This will allow you to position the heading relative to its parent container.
  7. Under Placement, set the Top and Left values to 0. This will align the jumbo heading to the top left corner of its parent container.
  8. Click on the logo element and go to the Styles tab.
  9. Under Display, set the Display field to Inline-Block. This will allow the logo to align with the jumbo heading horizontally.
  10. Under Margin, set the margin-right value to a desired amount to create spacing between the logo and the heading.

After following these steps, the jumbo heading will be left aligned with the top left logo in Webflow.

Additional questions:

  1. How can I align elements in Webflow?
  2. How do I use relative positioning in Webflow?
  3. How do I style a jumbo heading in Webflow?