Tab headers as a % of width

  • thegraematter

    (@thegraematter)


    7 years, 2 months ago

    I use your plugin’s tab shortcode and sometimes will have 2, 3 or 4 headings across the tabs.

    Currently the tab title determines the width of the tab header but what I’d like is to have the tab header a percentage of the width x titles. So if I have 2 tab headers then each tab header would be 50% of the overall width, if I had 4 then they would be 25% each of the width. The width is not fixed as I have a responsive site. However the titles are always the same “details” “dates, times & tickets” “venue info” “what you say…”

    I don’t know enough about coding to figure this one out – can anyone help?

    Thanks

    • This topic was modified 7 years, 2 months ago by thegraematter.
Viewing 1 replies (of 1 total)
  • NightL

    (@nightl)

    7 years, 2 months ago

    you will have to add a custom class to your style sheet

    by right clicking the tab when view your page and selecting Inspect (using Google Chrome browser – other browsers are similar) you will be able to see the class=”su-tabs-nav” etc – so then you can target the area – span tags

    .su-tabs-nav span {
    width: 33%;
    }

    but you will have to play with the % as the tab (span) has margin-right: 3px;

    the margin will be added onto the width: 33%; so you may need to use width: 31%;

    This will change tabs throughout the site – but if you only wish to target one tab area you will have to give it an id such as id=”tabPercent” (whatever you wish to call it)

    [su_tabs active="2" id="tabPercent"]
  [su_tab title="Tab 1"] Tab 1 content [/su_tab]
  [su_tab title="Tab 2"] Tab 2 content [/su_tab]
  [su_tab title="Tab 3"] Tab 3 content [/su_tab]
[/su_tabs]

    then your custom style will be

    #tabPercent .su-tabs-nav span {
    width: 31%;
    }

    this should be added to a custom style sheet – not your main style sheet. Many themes now have custom style sheet already added – if you can’t find it you should read up on WordPress custom style sheets

    in admin – look in Appearance / Editor

    • This reply was modified 7 years, 2 months ago by NightL.
Viewing 1 replies (of 1 total)
  • The topic ‘Tab headers as a % of width’ is closed to new replies.