Horizontal tab titles on mobile in CSS and Elementor | How to keep tab titles on top on mobile

แชร์
ฝัง
  • เผยแพร่เมื่อ 17 ธ.ค. 2024

ความคิดเห็น • 31

  • @cssexpresstutorials
    @cssexpresstutorials  10 หลายเดือนก่อน

    🚀 Interactive CSS Basics course for designers and non-coders:
    www.cssgamelab.com/
    👉 Get 20% off using the code VELVET20OFF at Checkout.
    💻 Grab the CSS code for free here:
    www.cssgamelab.com/2024/11/28/css-codes-for-wordpress-tutorials/

  • @andonisr
    @andonisr 2 ปีที่แล้ว

    Thank you! This really worked nicely. My tab names were mostly 2 worded - so it lay them horizontally on top, nicely!

  • @deremioguntunde
    @deremioguntunde ปีที่แล้ว +1

    Thank you for this tutorial , it was really helpful

    • @cssexpresstutorials
      @cssexpresstutorials  ปีที่แล้ว

      You're welcome, I am glad it helped! :) If you have any suggestions on what you would like to see next, just let me know :)

  • @azadwebdesign
    @azadwebdesign 10 หลายเดือนก่อน

    Thank you that was very useful.
    Can you please tell me how can I fixed the tab on top, when content scrolling in mobile?

  • @SimhaBode
    @SimhaBode ปีที่แล้ว +1

    The selectors have changed and I can't get it to work. I can't find wrapper anymore, I am wondering if this is because of flexbox being added to elementor. It seems they should have this option in the settings but it still arranges the tabs in this way I guess they call it "accordion" not sure what the use is of having tabs work in this way...

    • @lindakeller1782
      @lindakeller1782 ปีที่แล้ว

      You should try this:
      @media (max-width: 767px) {
      .e-n-tabs-mobile > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading {
      display: flex;
      flex-wrap: wrap !important;}
      .elementor-widget-n-tabs .e-n-tabs-content .e-collapse.e-active {
      display: none;
      }
      .elementor-widget-n-tabs .e-n-tabs-content .e-collapse:not(:first-child) {
      display: none;
      }
      div.e-collapse:nth-child(1){display: none !important;}
      #tabs-services {
      display: flex;

      flex-wrap: nowrap;
      overflow-x: auto;
      width: auto;
      }
      #tabs-services .tab-title {
      width: auto;
      flex: 0 0 auto;
      }

      .e-n-tab-title {
      flex-shrink: 0;
      max-width: 150px;
      flex-basis: auto;
      }
      }

  • @RY.Graphics
    @RY.Graphics ปีที่แล้ว

    thank you very much! I only had two tabs and this worked perfectly!

  • @suleiman8360
    @suleiman8360 2 ปีที่แล้ว

    its possible to customers elementor progress bar to be Semicircle

  • @suleiman8360
    @suleiman8360 2 ปีที่แล้ว +2

    can we have the css what did you write

    • @cssexpresstutorials
      @cssexpresstutorials  2 ปีที่แล้ว +12

      Grab the CSS code here:
      www.velvetmade.com/2024/02/19/css-codes-for-elementor-tutorials/

    • @suleiman8360
      @suleiman8360 2 ปีที่แล้ว +1

      @@cssexpresstutorials thank you so much

    • @lblockst
      @lblockst ปีที่แล้ว

      @@cssexpresstutorials Worked. Thank you.

    • @cssexpresstutorials
      @cssexpresstutorials  ปีที่แล้ว

      @@lblockst You're welcome!

    • @noomkorat7856
      @noomkorat7856 ปีที่แล้ว

      @@cssexpresstutorials thank you so much i want this to long timessss

  • @saaddriouech9310
    @saaddriouech9310 ปีที่แล้ว +1

    thanks alot !!!!!!!!

  • @noomkorat7856
    @noomkorat7856 ปีที่แล้ว

    good content Thank you

  • @responsiw9781
    @responsiw9781 ปีที่แล้ว +1

    GREAT

  • @adied7725
    @adied7725 2 ปีที่แล้ว

    Why not just have them swipe on mobile?

    • @andonisr
      @andonisr 2 ปีที่แล้ว

      How would you do that - it could be interesting?!

  • @aryo_digital
    @aryo_digital ปีที่แล้ว

    so coooolllllllllllll