How can I swap a tabbed section with the tabs on the top to tabs on the side?

Question

I have a client with this page: https://www.thedestinationproject.com/travel-abcs.

There is a tabbed section with the letters a-z in it. The problem is that on mobile this becomes scrollable and most people don't see it or use it.

They are using the ionos website creator and there is no option to set up a vertically tabbed box (that I can find).

My solution would be to move the tabs to the left of the content box.

I figured it would just be as simple as changing the width, display and float.

First, I tried this:

.widget-7b2ba5 .nav {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    width: 5%;
    float:left;
}

.widget-7b2ba5 .tab {
    display: flex;
    text-align: left !important;
    flex: 1 1 0%;
    flex-basis: auto;
    flex-direction: column;
    justify-content: space-around;
    align-content: flex-start;
    padding-top: 30px;
    max-width: 100%;
    width: 95%;
    float: left;
}

That didn't work so I thought I would take it out of the flex box since I am still learning how to manage those correctly and did this:

.widget-7b2ba5 .nav {
    display: block;
    width: 5%;
    float:left;
}

.widget-7b2ba5 .tab {
    display: block;
    text-align: left !important;
    padding-top: 30px;
    width: 95%;
    float: left;
}

I tried different widths just in case but nothing seems to work. Can anyone point me in the right direction to change this?

score 1 · Accepted Answer · answered Apr 24 '23 at 00:40

This should do it:

.widget-7b2ba5 .wrapper {
  flex-direction: row;
}

.widget-7b2ba5 .nav {
  flex-direction: column;
}

.widget-7b2ba5 .tab .tab-text-container {
  justify-content: unset;
}

First you change .wrapper flex-direction from column to row, so the menu appear on the left of the content.

Then change .nav flex-direction from row to column, so the letters appear one below the other, and not side by site.

Lastly, remove .tab-text-container justify-content that was set to center, so there isn't a big space between the elements.

Some may required !important depending where you put this declarations.

Thank you! I was missing the wrapper -> nav relationship. – Inventive Web Design Apr 25 '23 at 00:41 — Inventive Web Design, Apr 25 '23 at 00:41

How can I swap a tabbed section with the tabs on the top to tabs on the side?

1 Answers1