Tagged: 

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 1, 2016 at 2:44 pm #706721
    WP Turned UP

    Hello. I used this post to stack that tabs…accordion style. It works great, but I need some help to make the styling look the same as on non-mobile. Specifically, the background and text, of the active/open tab TITLE doesn’t retain it’s color properties.

    Please see this image that shows the issue.

    Thank you,
    Ryan

    November 3, 2016 at 4:41 am #707498
    Ismael

    Hey rlogan2334,

    Thank you for using Enfold.

    Please add this css code inside one of the css media queries for phones or tablets.

    .tab.active_tab.fullsize-tab {
    background-color: rgba(5,78,183,1)!important;
    color: #ffffff !important;
}

    Best regards,
    Ismael

    November 3, 2016 at 2:33 pm #707737
    WP Turned UP

    Hello. Thank you for the CSS, but I need the color properties of the tabs to be different for each section/tab group. I need the colors to match the corresponding iconbox colors.

    Here is the CSS I’m using and applying to ALL media queries. Again, looks great in desktop mode, but does not flow down to the media queries.

    #top.page-id-102 #cloud-solutions .tabcontainer .tab_titles .tab.active_tab {
    background-color:rgba(5,78,183,1)!important;
    color:rgba(255,255,255,1);
    }

    November 5, 2016 at 9:05 am #708614
    Nikko

    Hi,

    Try to add this code:

    #top.page-id-102 #cloud-solutions .tabcontainer .av_tab_section .tab.active_tab {
    background-color: rgb(5, 78, 183) !important;
    color: rgb(255, 255, 255) !important;
}

    Let us know if it works :)

    Best regards,
    Nikko

    November 5, 2016 at 6:46 pm #708721
    WP Turned UP

    Hello. That works fine for the #cloud-solutions section. Is there no way to make the Accordions have the same behavior as the Tabs? I’d like to avoid putting in all the manual CSS for each section, if possible.

    November 7, 2016 at 3:24 pm #709265
    Nikko

    Hi!

    I think it’s possible but we could not cover it with our support since that would take a lot of time to do. What I suggest to do with css is not to make it so specific for example changing this #top.page-id-102 #cloud-solutions .tabcontainer .av_tab_section .tab.active_tab to just #top .cloud-solutions .tabcontainer .av_tab_section .tab.active_tab, removing the page-id will allow this code to apply on other pages and using class (.) instead of id (#), you can use it multiple times within the same page. Hope you find this helpful :)

    Best regards,
    Nikko

    November 7, 2016 at 3:44 pm #709295
    WP Turned UP

    Hi. I will try this out and get back to you. However, this should already be built into the theme. If this functionality is already there with Accordions, it can be done with Tabs…I would think.

    Thanks!

    November 8, 2016 at 2:35 pm #709810
    Andy

    Hi,

    We would be glad to help you with this customization, but at the moment there is no easy way to do this by using a small custom code snippet, so I am afraid its out of the scope of our support.

    But please feel free to request such feature at our feature request system: https://kriesi.at/support/enfold-feature-requests/

    This system allows us to keep track of user suggestions and lets you vote on the feature you would like to see the most. I am afraid though there is no guarantee that a feature will get implemented. If that’s something you really need you can always try to hire a developer for the task :)

    Best regards,
    Andy

    November 8, 2016 at 3:00 pm #709841
    WP Turned UP

    Understood. Please close.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Tabs on Mobile’ is closed to new replies.