Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 20, 2014 at 8:59 pm #307055
    FloppySocks

    Hey guys,

    I am hoping to customize the tabs for the mobile browser only, is this at all possible? I would like for all tabs are closed by default on mobile browsers so that the user can see easily see all tab headings at once (I guess behaving similarly to the accordions, but on mobile only).

    Also – while, not crucial – is it at all possible to change the color of these tab headings on mobile?

    Thanks for all the help! I’m using Enfold for a pretty big project, the company I work for has two big site – all in need of a major overhaul. Once I’m finished with this one, I’ll be purchasing another Enfold license to work on the sister site.

    – Julian

    August 21, 2014 at 3:10 am #307108
    Ismael

    Hi PaintedMidget!

    Thank you for using Enfold.

    You can create two tabs, one for mobile and the other for desktop. Set the mobile tab Initial Open setting to 0. Hide the desktop tab on mobile view using media query vice versa.

    Cheers!
    Ismael

    August 21, 2014 at 4:21 pm #307426
    FloppySocks

    Hey Ismael,

    Thanks for the help and sorry for my ignorance, but would you be able to explain how this is done?

    I found a support inquiry (http://stackoverflow.com/questions/12517449/how-to-show-hide-elements-using-media-query) that demonstrates how to do this, but I am unsure how to specify on my page which set of tabs I want to be visible on specific views. Thanks!

    – Julian

    August 21, 2014 at 4:32 pm #307429
    Yigit

    Hey Julian!

    You can firstly turn on Custom CSS field for ALB elements ( http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and then give your elements a custom CSS class ( i.e.: my-tab-one and my-tab-two ). Then you can add following code to Quick CSS

    @media only screen and (max-width: 480px) {
.my-tab-one { display: none; }}
@media only screen and (min-width: 480px) {
.my-tab-two { display: none; }}

    Regards,
    Yigit

    August 22, 2014 at 7:16 pm #308043
    FloppySocks

    Perfect, thanks!!

    August 23, 2014 at 7:16 am #308173
    Ismael

    Hi!

    Glad we could help. :)

    Regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Custom tabs for mobile only’ is closed to new replies.