How to Create a Sleek Transparent Sticky Header with Kadence Advanced Header Block & Hooked Elements

Поделиться
HTML-код
  • Опубликовано: 30 янв 2025

Комментарии • 56

  • @CliftonWP
    @CliftonWP  2 месяца назад +1

    Hello If you are encountering an issue on mobile with the mobile off-canvas trigger, the awesome team at Kadence is working on a fix. In the mean time use the code below to resolve the issue on your end:
    Access the customizer and select Additonal CSS and enter the following code:
    .kb-modal-open .kadence-pro-fixed-item:has(.wp-block-kadence-off-canvas) {
    height: 100%;
    }

    • @LPADCSP
      @LPADCSP 2 месяца назад

      Thank you for the workaround while we wait for the final solution. it works well on ANDROID and IOS. Thumps up!

    • @CliftonWP
      @CliftonWP  2 месяца назад

      @@LPADCSP You are welcome!

  • @lynne3469
    @lynne3469 28 дней назад

    Wow. Thank you so much Clifton. This tutorial is so detailed, even down to the header tag at the end! I love this header effect. I would be lost without your tutorials - you are amazing! 🥰

    • @CliftonWP
      @CliftonWP  13 дней назад

      You are so welcome! Thank you so much for watching and your support!

  • @Chris-LiquidMedia
    @Chris-LiquidMedia 12 дней назад

    As always, fantastic tutorial! Thanks, Clifton 😊

    • @CliftonWP
      @CliftonWP  12 дней назад

      You are very welcome and thank you very much for watching and your support! I appreciate you!

  • @Samryasin88
    @Samryasin88 20 дней назад

    If I'm advanced wordpress user I won't see vedioes to learn wp, you are the best for whom wants to learn wp, thanks for the great work man.

    • @CliftonWP
      @CliftonWP  13 дней назад

      Thank you! I appreciate you and I appreciate your support!

  • @StayinCork-mj3qc
    @StayinCork-mj3qc 2 месяца назад

    Super clear as usual

  • @sisoMK
    @sisoMK 3 месяца назад

    Keep up the great work!!

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thank you so much!

  • @MarioAyalaCabello
    @MarioAyalaCabello 3 месяца назад +2

    Excellent tutorial, as always! A sidebar menu tutorial will be great too! 😊

    • @CliftonWP
      @CliftonWP  3 месяца назад +1

      Thank you very much and Thank you for the suggestion! Anything specific you would like to learn about creating sidebar menu?

    • @MarioAyalaCabello
      @MarioAyalaCabello 3 месяца назад

      @@CliftonWP something similar that this menu: ruclips.net/video/nvh51c4UfmM/видео.htmlsi=FssRI7vXr-lFd2fR It will be possible to achieve with new kadence blocks?

  • @markscheider3884
    @markscheider3884 3 месяца назад

    Дякую за твої уроки, Кліфтоне! Поєднання можливостей теми Kadence та твого відчуття прекрасного дають неперевершені результати!

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Дуже дякую! я вас ціную!

  • @BrendaMalone
    @BrendaMalone 17 дней назад

    Thanks!

    • @CliftonWP
      @CliftonWP  13 дней назад

      Thank you so much Brenda! I appreciate your support!

  • @amedeodicarlo2045
    @amedeodicarlo2045 3 месяца назад +1

    As usual Clifton, great job with your detailed explanations. Thank you!

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thank you very much! I appreciate you watching and I appreciate you!

  • @markuserikssen
    @markuserikssen 3 месяца назад +1

    This is excellent! I was just wondering how to create a frosty menu design. Thanks again, Clifton!

    • @CliftonWP
      @CliftonWP  3 месяца назад +1

      You are very welcome!

  • @charliegerson7570
    @charliegerson7570 3 месяца назад +1

    Wow Clifton!
    Thank you for taking us a step further in the Kadence Advanced Header. You always make Kadence look new, great and powerful in your well prepared and easy to follow comprehensive tutorial. Million thanks to you for your wonderful work. You are the Best of the Best.

    • @CliftonWP
      @CliftonWP  3 месяца назад +1

      Thank you so much Charlie! I appreciate you!

  • @Line49Design
    @Line49Design 3 месяца назад +1

    Once again, Clifton surprises me. I thought this would be just another tutorial about building a nice presentation. However, in this video he presents two original and technically creative ideas:
    1) The use of Kadence Elements to create a "Fixed After Scroll" sticky menu approach that differs from what most of us would have done. This is a truly outside-the-box type of idea that wasn't possible with the Customizer header builder, and I have no idea how he thought of this.
    2) The use of Advanced settings to ensure that his secondary header uses the tag for SEO purposes. This shows insight beyond just web design.
    One other thought: now that headers can be made of blocks, it may also be possible to use synced block patterns (ie, Reusable Blocks) as "includes" to populate two separate headers with one synced set of blocks.
    Either way, this video has some great inspiration for using this new header building paradigm.

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thank you so much! I really appreciate you and grateful for the breakdown! You captured it perfectly! Thank you!

  • @seblatour
    @seblatour 3 месяца назад

    You are a great teacher!

  • @KaiBuskirk
    @KaiBuskirk 3 месяца назад

    Fantastic great job! I got notified only 6 days later now! Real Improvement!

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thank you Kai! Appreciate you!

  • @shesmilesbetter
    @shesmilesbetter 3 месяца назад +1

    Thanks a lot, Clifton, that's a very nice effect and, as always in your tutorials, an excellent and extremely helpful demonstration!
    BTW, in your last tutorial on the 5 new Gutenberg blocks, you gave an answer to somebody's question on different use cases for Section versus Row blocks, which, in the typical clarity of yours, was a real eye-opener for many beginners, not just this one, I'm sure.
    I wonder if you could imagine it to be worthwhile doing a specific tutorial on that very topic?
    And thanks again for the above tutorial, very much appreciated!

    • @CliftonWP
      @CliftonWP  3 месяца назад +2

      Wow! Thank you so much for your support! I appreciate it very much. The Section versus Row blocks use cases video is a great suggestion. I'll add it to the video queue. Thanks again!

  • @PilatesinSacramento
    @PilatesinSacramento 3 месяца назад

    Another great video, Clifton! 👍

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thank you so much and hope all is well with you!

  • @RobCooper
    @RobCooper 3 месяца назад

    I've got beef on my mind apparently. I read your title as How to Create a Steak Transplant, but then sticky header caught me off guard so I re-read it lol.

    • @CliftonWP
      @CliftonWP  3 месяца назад

      LOL!🤣! Thank you for that!

  • @internetmarketing4133
    @internetmarketing4133 3 месяца назад

    Can you create pod ecom store with order bump?

  • @GoldMiningMagazine
    @GoldMiningMagazine 3 месяца назад +1

    Just wondering if you still plan on a doing a video on the various new Kadence Ai features? ... and if so, any idea of aprox. when you might be releasing that video?

    • @CliftonWP
      @CliftonWP  3 месяца назад +1

      Thank you! This is in the works. I'll have it completed soon. Thank you for watching!

  • @RahimJazebi
    @RahimJazebi 3 месяца назад

    Hello Clifton.
    On my mobile phone and iPad, I’ve noticed that when I scroll down the page, the top menu briefly disappears and then reappears without any problem. However, tapping the sandwich icon in the top-right corner doesn’t open the menu.
    Has anyone else encountered this issue and found a solution?
    Thank you in advance for your help!

    • @CliftonWP
      @CliftonWP  3 месяца назад

      Thanks for letting me know about this. This appears to be a bug. I'll let support at Kadence know, so they can look into it. Thanks again.

    • @RahimJazebi
      @RahimJazebi 3 месяца назад

      @@CliftonWP Hi I realised that the whole background and its links still there but go behind the page content and hidden so I tried to apply z-indes: 10000; to appear up but it wasn't successful so I do not know what I need to do and just left it! Please let me know if you find solution. Many thanks for your kind support.

    • @CliftonWP
      @CliftonWP  3 месяца назад +1

      @@RahimJazebi Thank you, no worries, Kadence is really good and fixing issues like this. I'll bring it to their attention and let you know once they get back to me. Appreciate your patience and thanks for watching my video!

    • @RahimJazebi
      @RahimJazebi 3 месяца назад

      @@CliftonWP I want to thank you for the valuable lessons you’ve shared here. I’m proud to be your student. Thank you so much

    • @yaroslav_travelchem
      @yaroslav_travelchem 2 месяца назад

      @@CliftonWP any news about this bug? Today have the same problem on iphone with brave browser. When second menu appears, after clicking on burger icon nothing happens and then scroll freeze and need to refresh page.

  • @WtSay
    @WtSay 2 месяца назад

    Hi clifton, I am facing the issue on desktop, when I scroll down the page, the top menu disappears and then isn't reappears. Anyone go through this type error?

    • @CliftonWP
      @CliftonWP  2 месяца назад

      Thank you! These are built using two elements so when one disappears the other appears. If the second is not appearing, check your display setting in the Element Settings. I hope that helps!

  • @LPADCSP
    @LPADCSP 3 месяца назад

    Hello everyone.
    On my Android mobile phone, when I scroll down the page, the top menu briefly disappears and then reappears without any issues.
    However, when I tap the menu icon in the top-right corner, nothing happens.
    Update: It seems that the menu is actually behind the page content.
    Has anyone else experienced this issue and found a solution?
    Thanks in advance for your help
    B.

    • @yaroslav_travelchem
      @yaroslav_travelchem 2 месяца назад

      have the same problem on mobile on iphone using brave browser. When second menu appears, after clicking on burger icon nothing happens and the scroll freeze and need to refresh page.

    • @LPADCSP
      @LPADCSP 2 месяца назад

      @@yaroslav_travelchem Workaround available in the msg above. it works well on ANDROID and IOS.