Looking for help styling tabs

Beaver Builder
1

I’ve been struggling with styling some tabs in a particular way for the last couple of days. Take a look at here and here at what I have so far.

I’ve been unable to center the text vertically (and ideally, those tabs would be circles, not rectangles). I need to target two divs: the one that contains all the labels, and then the labels themselves. I found a page with a lot of suggestions for how to do this, but none of the methods seem to work.

It seems I should be able to use display: table-cell and vertical-align: middle to pull this off, but it gets all wonky when I try it. Has anyone managed to pull this off?

2

Hey Dave,

Thanks for getting in touch. Good work on the tabs module, wow, looking great! That’s pretty complicated CSS and I’m not entirely sure if it’s possible, but we’ll take a look. Hang tight though, we’re a bit understaffed at the moment so we may not be able to get back to you until tomorrow.

Best,
Billy

3

Thanks Billy! I hope Robby and Justin are enjoying their time in Cabo. That looked like a very cool conference. I’m assuming you lost the coin toss!

Thanks for the compliment! The whole site is turning out really nice. It’s built on a custom BB child theme. The only thing I couldn’t figure out was how to make the top semi-transparent background section happen with the BB plugin, so that’s handled with ACF and a bunch of conditionals in the page template file. Now that I think about it I could have probably pulled the whole thing off with BB had I been patient enough to try to figure it out.

For now I’m ready to throw in the towel with this and just insert a few <br> in the tab titles so they all have the same number of lines, unless there’s some genius out there with a better idea!

4

Yep, they sure are! :slight_smile: I actually made the call to stay back. I have young twins and felt bad for leaving an entire week, plus, someone has to man the fort, right? :slight_smile: I do kind of wish I would have gone though, next year!

I am going to have Ben take a look in the morning, it’s a bit too complex for my coding chops, but he may have some suggestions.

Best,
Billy

5

Thanks, Billy. And you’re a good guy for staying back with the little ones!

6

Hey Dave,

Could you try this bunch of snippets? Since you’re using the BB theme, you can place this code directly under Theme Appearance > Code > JavaScript code. This places a span tag around the text inside the .fl-tabs-label.

jQuery(document).ready(function() {
  jQuery('.fl-tabs-labels .fl-tabs-label').each(function(){
    jQuery(this).wrapInner('<span></span>');
  });
});

Then add this CSS snippet as well.

.fl-tabs-labels .fl-tabs-label {
  display: table;
  width: 100%;
  border-radius: 100%;
}
.fl-tabs-labels .fl-tabs-label span {
  display: table-cell;
  vertical-align: middle;
}

Let us know how it goes! :slight_smile:

Edit: Added CSS to make it circle-ish. :slight_smile:

Ben

7

You, sir, are the master. Thanks so much for the help!

8

Hey Dave,

No worries! Enjoy BB! :slight_smile:

Ben

9

Moved DAW Digital’s reply as a new topic - http://forum.wpbeaverbuilder.com/support/q/horizontal-sub-menu