Tricky Tabs Layout Challenge


I’m currently working on my agency’s new website, and I’ve come up against a rather tricky layout problem. I need a Tabs menu to be arranged side by side, with a text element below both of them, like this:

However, I can’t seem to find a way to arrange the elements in that way, instead they are arranged like this:

Any and all help is much appreciated!


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

You can try to do the next steps:

  1. Tab Pane [Analytics] - change Position to “Static”; (Repeat it with all tab Panes)
  2. Side Tabs Content - change Position to “Static”;
  3. Side Tabs Menu - add bottom margin = ±200px (you can set more suitable later);
  4. Paragraph Tab - change Position to “Absolute” with bottom left alignment (as on image below);
    Screen Shot 2020-05-12 at 13.46.25
  5. Paragraph Tab - change left margin from 200px to 0px;
  6. Paragraph Tab - set width = 40%;
  7. Paragraph Tab - set text align = left

It should work :crossed_fingers:

What I have as a result:

Amazing, you just blew my mind a bit! I really need to start learning more about the different position options…

This worked perfectly, thanks so much!

1 Like

You’re welcome :slightly_smiling_face: :+1: