Nested tabs with different alignment

  • Resolved steigw

    (@steigw)


    9 years, 1 month ago

    Hello,
    I need to have different alignment on tabs. URL: https://altoserv.biz/xcal

    scroll to the bottom of the picture and you’ll see the first set of three tabs. How can I make these three tabs all be the same width and be evenly spaced across the page?

    Click on “Learn more” (center tab) and you’ll then see the next set of tabs. These are vertical and need to have left aligned text. What can be done for left aligned text?

    I tried a number of CSS solutions for the first set of tabs and it seemed the second set of vertical tabs would inherit the settings from the first set of horizontal tabs.

    I appreciate your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter steigw

    (@steigw)

    9 years, 1 month ago

    I’ve put CSS code in to make the first level horizontal tabs the same width and centered, but I don’t know how to give the second level tabs left hand alignment. The code for the horizontal tabs also caused the vertical tabs to be narrow.

    Can you help fix this?

    Plugin Author wpshopmart

    (@wpshopmart)

    9 years, 1 month ago

    Add below css in your vertical tabs custom css field –

    #tab_container_1027 .wpsm_nav-tabs > li{
width:100%;
}

    Try it and then let me know.

    Thanks

    Thread Starter steigw

    (@steigw)

    9 years, 1 month ago

    That fixed the tab width problem, but how can I make the text in the tabs left justified?

    Plugin Author wpshopmart

    (@wpshopmart)

    9 years, 1 month ago

    In vertical tab or in horizontal tab?

    Thread Starter steigw

    (@steigw)

    9 years, 1 month ago

    vertical tab

    Plugin Author wpshopmart

    (@wpshopmart)

    9 years, 1 month ago

    Add below css code in your tabs custom css field –

    #tab_container_1027 .wpsm_nav-tabs > li > a{
    text-align: left !important;
}
    Thread Starter steigw

    (@steigw)

    9 years, 1 month ago

    excellent; thank you!

    Thread Starter steigw

    (@steigw)

    9 years, 1 month ago

    That works well thanks! I’d like to insert a picture on top of the background image into the upper left of the screen. However, using the “alignleft” seems to be overwritten by the “text alignment = center” option set with the switches below the input box.

    Is it possible to override that switch setting? I’ll probably want to end up with two side by side text boxes anyhow, so I’ll need to override that global choice setting.

    • This reply was modified 9 years, 1 month ago by steigw.
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Nested tabs with different alignment’ is closed to new replies.