How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder

Поділитися
Вставка
  • Опубліковано 14 гру 2024

КОМЕНТАРІ • 50

  • @chadverity7599
    @chadverity7599 4 роки тому +4

    Skip to 11:00 if you want to actually see "How to Shrink Your Global Header’s Size When Scrolling with Divi’s Theme Builder"

  • @KrisJolls
    @KrisJolls 5 років тому +37

    One of the most disappointing features of the Theme Builder. It should be easier to make a header mimic the master heder we already use. Secondly, Divi should have built in CSS so we can just add a css class or classes to our header template to make them sticky, shrink etc. I have a feeling this turns a lot of folks off.

    • @traumafreetv2.082
      @traumafreetv2.082 3 роки тому +1

      Couldn´t agree more I must say. I have been sitting here the entire (!!) day trying to make this header sticky and responsive. It jumps up and down on mobile, gets bigger although I didn´t change any settings, it sometimes opens on mobile, sometimes it doesn´t, especially not when I scroll down and the last menu items don´t show on mobile either. I am truly and really at the point of a nervous breakdown right now. This is WAY too user unfriendly!

    • @KrisJolls
      @KrisJolls 3 роки тому +1

      @@traumafreetv2.082 Sometimes getting the padding and margins and stickiness to change from desktop to mobile can be tricky. It could be easier for you to have TWO headers, One is for the desktop and one is for mobile. Then you just hide and show them accordingly. This way for your mobile header you don't even need to worry what it looks like one desktop because it will be hidden and vise versa.
      I'm gonna start a YT series on Divi if you're interested.

    • @traumafreetv2.082
      @traumafreetv2.082 3 роки тому +1

      @@KrisJolls Yes, please do, that would be awesome. And thanks for the advice about the two headers. I was actually thinking about doing this yesterday. So I guess I will spend a few hours MORE and do that. **sighs**

  • @ivandelaossa6790
    @ivandelaossa6790 4 роки тому +5

    Could you please make a tutorial on how to make a header that goes from transparent to solid color when scrolling and combining it with the effect of resizing it

  • @isabelmariasaezperez2181
    @isabelmariasaezperez2181 4 роки тому +2

    This is great thanks! Is it possible also to change the image logo for another logo when it scrolls but also shrink the size like this tutorial?

  • @1asdfasdfasdf
    @1asdfasdfasdf 5 років тому +4

    Two steps forward and one step back. This should have been a native function like it was before the new theme builder.

    • @pattyayers
      @pattyayers 4 роки тому

      I have never imagined such spoiled users! Wow!

    • @1asdfasdfasdf
      @1asdfasdfasdf 4 роки тому +4

      @@pattyayers A developer actually. And so many sites used that function before the DiVi upgrade that's its an insult to website builders to be teased with with the new theme builder only to leave that out. Sure some can add CSS to bring that functionality back but it goes against the DiVi promise. When a product is upgraded its core features should come with the upgrade. I'd never put my customers or support staff in a position of having address that shortcoming after an upgrade with a customer. If you you can't see that I give up. 🙄

  • @marcoslabbers8718
    @marcoslabbers8718 2 роки тому

    how i can make the mobile menu fullwidth in the custom header?

  • @wakelingchicken
    @wakelingchicken 4 роки тому +3

    I understand where you're coming from @Patty but I still agree with the other guys on here.
    The Divi mission is to keep coding to a minimum.
    Therefore, when introducing the theme builder, it should have been possible to build the default header without resorting to the great hunks of CSS Mak is pasting in here. And this just handles the shrinking header - it hasn't even covered the "shrinking logo on scroll" which is also a part of the default header.
    Sorry Mak, Nick and the team - a bit more needed please :)

  • @roxcastaneda
    @roxcastaneda 4 роки тому

    On the Hamburger Menu, I saw a site that has a very nice little image that changes to another when it opens. How can I do that?

  • @ollywood6942
    @ollywood6942 4 роки тому

    This is great.... but it screws up the iPad or Phone view as the menu is now stuck off screen over to the right. Why can't Wordpress / Divi accept that you want 2 different views on different size screens!
    If so, how... ?

  • @UniversalDesignz
    @UniversalDesignz 4 роки тому

    @Mak what's happened to double and triple menu? The top one fixed or hide on scroll and middle one to shrink on scroll?

  • @rijanparajuli6465
    @rijanparajuli6465 4 роки тому

    Shrink effect is at 11:02

  • @joeys7570
    @joeys7570 3 роки тому

    Bro looking swol! Keep it up

  • @kellyeldridge6319
    @kellyeldridge6319 4 роки тому +1

    Hi, has the code for the scrolling effect changed as it doesn't seem to be working for me

    • @kellyeldridge6319
      @kellyeldridge6319 4 роки тому

      Never mind found out why. Thanks for the tutorial, really good

    • @elegantthemes
      @elegantthemes  4 роки тому

      Great! We'll be right here if you need any help. 😄

  • @keithkaru7470
    @keithkaru7470 Рік тому

    Mark can I get a copy of jquery code

  • @traumafreetv2.082
    @traumafreetv2.082 3 роки тому

    Hi, I don´t have the z index option, what can I do? Thanks so much for your tutorials as usual! Without them, I´d be lost regarding DIVI!

    • @elegantthemes
      @elegantthemes  3 роки тому +1

      Hi there! 😃
      Please, go to the Module/Row/Section Settings > Advanced Tab > Position and you will find the z-index option there. Have a look at the screenshot:
      prnt.sc/1buerbc

    • @traumafreetv2.082
      @traumafreetv2.082 3 роки тому

      @@elegantthemes Thanks so much!

  • @vijeyparthasarathy
    @vijeyparthasarathy 4 роки тому

    How to add a top bar above a menu which has the phone number address and social media icons

  • @kbarnaby1296
    @kbarnaby1296 4 роки тому

    When you equalize Column Heights, is it a 100% of width or 100% of Max Width or both?

  • @lorenzlucin9938
    @lorenzlucin9938 4 роки тому

    Why when I’m viewing my page the alignment of the menu in not on center?

  • @borysslowikowski-framedrum6388
    @borysslowikowski-framedrum6388 3 роки тому

    It doesn't work in my custom header. Would be better if I wouldn't have to use CSS :(

  • @The_Giorgio
    @The_Giorgio 4 роки тому

    I'm sure it's possible to change size of the logo by adding some css, but i don't konw how to do that :(

    • @ssaarroo100
      @ssaarroo100 3 роки тому

      I am interested in that too (no answer :( ... )

  • @0OGman0
    @0OGman0 4 роки тому

    Im getting a white div on the top of the page when i add the code, like its trying to show the code on the home page, anyone knows why?

    • @gatorgrowl7325
      @gatorgrowl7325 4 роки тому

      It actually shows the code for me just under the menu. I'm not sure what is the problem. I've tried it with the fixed header enabled and disabled. For me, at least, I'm assuming there is something wrong in the code but I can't figure it out. I am adding the and tags. I've also tried just pasting in the code without the script and style tags. Any advice would be greatly appreciate. And on a personal note, I want to thank Mak so much because his videos are truly helpful, enlightening, and inspiring.

  • @ayeshasattar6634
    @ayeshasattar6634 4 роки тому

    Awesome teacher, super awesome

    • @elegantthemes
      @elegantthemes  4 роки тому +1

      You're welcome Ayesha! 😄

    • @ayeshasattar6634
      @ayeshasattar6634 4 роки тому

      Can you make a full functioning LMS website with divi along with either tutorlms or lifterlms

  • @BrandWebMedia
    @BrandWebMedia 3 роки тому +1

    i have lifetime subscription, the theme is the best i'v used , but with all that knowledge they put into the theme, they could not make better header and footer features? flatsome and other themes have better header and footer design.

  • @StanHirson
    @StanHirson 5 років тому +1

    Show us the final product FIRST and then show us how .you got there. I had no idea what was going on because there was no rationale. Do this, do that. WHY?

    • @pattyayers
      @pattyayers 4 роки тому

      Put out some effort! Jeeeeeeeez

  • @ivoireservices3251
    @ivoireservices3251 4 роки тому

    Great ! Thanks

  • @bradmason1068
    @bradmason1068 4 роки тому

    Wait til the end of the video before touching on what the title of your video is about why don't you!

  • @marcoscandido7434
    @marcoscandido7434 3 роки тому

    it never works

  • @jomusic4me930
    @jomusic4me930 4 роки тому

    It does not work!!!!

    • @elegantthemes
      @elegantthemes  4 роки тому

      Our support team would be happy to help you with that! Just open a chat and the help is on its way. www.elegantthemes.com/members-area/help

  • @iusmanasif
    @iusmanasif 5 років тому

    Interesting :)

  • @samdon99
    @samdon99 6 місяців тому

    Most irritating tutorial ever. you just needed to tell about code rather than explaining how various type of menus can be made.

  • @yoyo12314
    @yoyo12314 2 роки тому +1

    Terrible result

  • @pattyayers
    @pattyayers 4 роки тому +1

    Jeeeez, you guys in the comments are demanding! 'Disappointing' - 'Why is it not exactly what I want' - 'Do I actually have to DO something?'

  • @rethiagarajan
    @rethiagarajan 5 років тому

    First..