[FREE] How to Create Transparent Sticky Header in WordPress with Elementor

  Рет қаралды 143,335

Make Dream Website

Make Dream Website

Күн бұрын

Пікірлер: 413
@silinaunger9118
@silinaunger9118 3 жыл бұрын
This is the best video I've seen for making Header with Elementor. Thanks!
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thank you so much❤️
@nawrisid3872
@nawrisid3872 3 жыл бұрын
@@MakeDreamWebsite TOOOP
@saeim3344_
@saeim3344_ 2 жыл бұрын
@@MakeDreamWebsite loveeeee u bruh
@saeim3344_
@saeim3344_ 2 жыл бұрын
can you make a vedio about how to recive order and how to make a order form in wordprees pls .
@FreeFirenoble
@FreeFirenoble 11 ай бұрын
bhai creating menu is not showing on my website@@MakeDreamWebsite
@HamdhanHasmy
@HamdhanHasmy Жыл бұрын
This is the best video in youtube for making header with Elementor. Hats off mate!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Glad you liked it!
@Revefx
@Revefx 3 жыл бұрын
Man, you really created a beautiful tutorial. I was halfway into the video and tested it how it will look on mobile and I thought - good, how will i fix this, tried few things and gave up. Then played your tutorial again and I was really happy that you even covered this part! Thank you very much.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
I'm also glad to know that really helps you..
@pruthviravindra859
@pruthviravindra859 3 жыл бұрын
Probably the best video on creating a transparent sticky header! I was happy that you considered the mobile and tablet layouts as well for the explanation.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thank you Pruthvi 😊
@merhabafam347
@merhabafam347 Жыл бұрын
I am very fresh on wordpress and you made may day man.
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Awesome! Thank you!
@iplaystudio7482
@iplaystudio7482 Жыл бұрын
The best elementor mentor ever! I love your videos, I'm really slow but it works, Please always show your navigation menu, Cause I sometimes mess up and the code doesn't work. Thank you!!!
@Lankan-kolla
@Lankan-kolla Жыл бұрын
thank you for informations, But that html code not working . please help me!
@beyond3d344
@beyond3d344 Жыл бұрын
The HTML is also not working for me 😢
@ha97sa
@ha97sa 23 күн бұрын
me too, did it work with you later ?
@OrangeartFactory
@OrangeartFactory 2 жыл бұрын
Hay hi, can you please tell how to remove the grey slider animation when we click the HM.
@cryptonite6000
@cryptonite6000 2 жыл бұрын
I would also need help here, when i turn my phone horizontaly the Grey slider is on half of the screen and the site isnt useable anymore
@OrangeartFactory
@OrangeartFactory 2 жыл бұрын
@@cryptonite6000 same problem for me too
@cryptonite6000
@cryptonite6000 2 жыл бұрын
.elementskit-menu-overlay { display:none !important} Throw that in your global CSS file mate
@OrangeartFactory
@OrangeartFactory 2 жыл бұрын
@@cryptonite6000 thanks mate.
@lefutur888
@lefutur888 3 жыл бұрын
Great Video! I have a little problem however, I wonder if you know where it comes from. When I just start scrolling down, the whole page drops right under the header before coming back up as I scroll, the header being on top of the whole page at first. I looked into the settings of the header and of the block but could find anything that would work. Do you have any suggestion?
@413XUIFC
@413XUIFC 2 жыл бұрын
Same here
@arifnzhrll
@arifnzhrll 10 ай бұрын
can u make a code for container please, cozz this is not work for it, thank u
@jazzeyhenry
@jazzeyhenry Жыл бұрын
This is by far the best tutorial video I have ever watched, I am glad to have found this channel and I subscribed immediately, you just saved my website Thanks!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Thanks for your valuable comment ❤️
@arunhembram1859
@arunhembram1859 3 жыл бұрын
Undoubtedly the most informative video.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thanks a ton ❤️
@eltoski01
@eltoski01 3 жыл бұрын
I love you 😂😂😂😂, thanks for this video, just saved my life 😂😂🔥🔥🔥🔥🔥💜💜, best video on elementor menu ever 🔥🔥🔥
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Haha.. you're welcome
@northcountrydesign10
@northcountrydesign10 3 жыл бұрын
How does your inspect page option give you a dropdown for various screens to test how it looks? Is that Chrome?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Yes, that was Chrome Browser. After inspecting press Ctrl + Shift + M. Then, you get that dropdown.
@gaborberei2650
@gaborberei2650 10 ай бұрын
Hi my Friend! Z-index is working with 2 on new version, but the code is not working with new container. Not make sticky. What can we do? Can you help me? THX
@albertcesp
@albertcesp 10 ай бұрын
Same problem here
@JustHope-cw6xf
@JustHope-cw6xf 6 ай бұрын
The video is cool and straight forward for even a newbie to use
@MakeDreamWebsite
@MakeDreamWebsite 6 ай бұрын
Thank you!
@mcfundingusa4583
@mcfundingusa4583 3 жыл бұрын
After doing menu in elementskit lite, how did you bring it on Wordpress theme? and how did you remove default header of Wordpress theme
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
While creating header from dashboard, you can find a option "Activation". After turning on this, your theme's header will be replaced by ElementsKit header.
@mikkoomararguelles1995
@mikkoomararguelles1995 Жыл бұрын
Great work! However, the transparent sticky header does not work properly with the flexbox container.
@ha97sa
@ha97sa 23 күн бұрын
how can we make it with the flexbox container?
@srinivasrajapuram6384
@srinivasrajapuram6384 2 жыл бұрын
I am not able to get primary menu option, any suggestions? It is showing up only menu option..
@VishalBhargavRaj
@VishalBhargavRaj Жыл бұрын
Brother I did it exactly initially it perfectly made … but I messed up with mobile alignments so I started again … , there is problem when am giving margin to Create transparent header , instead of bottom margin , top margin sliding up 9:23 … what can be the issue ??
@VishalBhargavRaj
@VishalBhargavRaj Жыл бұрын
And there is a problem with this as it grabs the section below the header … all pages tend to go up and distract with header
@reefatsayyad1279
@reefatsayyad1279 3 жыл бұрын
You are really amazing! Nobody has made a video like you did! Clearly understandable..!
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thank you so much 😀
@kshiv1335
@kshiv1335 3 жыл бұрын
I have only one simple word to describe your efforts...just wowwww amazing Loved that
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thank you so much
@karankrash9033
@karankrash9033 3 жыл бұрын
sir theres a slight transparent black line coming from menu side . So how can we fix that
@cryptonite6000
@cryptonite6000 2 жыл бұрын
Same Problem here
@NadineOb-x8c
@NadineOb-x8c Жыл бұрын
Great video! Your step-by-step instructions made it so easy to follow and understand. Thank you so much for taking the time to create and share this valuable content! Keep up the fantastic work.
@ajwebhub
@ajwebhub 3 жыл бұрын
You're a absolute gem.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thanks a lot!
@srinivasdasari5592
@srinivasdasari5592 3 жыл бұрын
Nice explanation. Thank you. How to manage menu arrow(leads to submenus) colour in the html code that you presented? I want to change the colour of menu arrow on the header when the page is scrolled down. Also, how do you manage submenus structure in the mobile/tablet view?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
I need to take a look on your current website. Then, I can suggest you to write some additional CSS code for that.
@subratakundu1004
@subratakundu1004 Жыл бұрын
The code is not working
@owaissonija7339
@owaissonija7339 6 ай бұрын
Use the following code and let me know if it does not work: .elementor .elementor-element-b04fa57 { background: #FFFFFF; padding-top: 11px; padding-bottom: 11px; box-shadow: 0 0 30px 0 rgb(0 0 0 / 20%); position: fixed; width: 100%; top: 0; transition: all 0.3s ease-in-out; } .admin-bar .elementor .elementor-element.sticky{ top: 32px; } .elementor .sticky .elementor-element .elementskit-navbar-nav > li > a, .elementor .sticky .elementor-element .elementor-social-icon i, .elementor .sticky .elementor-element .elementskit-menu-hamburger > .ekit-menu-icon{ color: #000000; transition: all 0.3s ease-in-out; } .ekit-template-content-header .elementor-widget-image, .elementor-location-header .elementor-widget-image{ margin-bottom: 0; } .ekit-template-content-header .sticky .elementor-widget-image, .elementor-location-header .sticky .elementor-widget-image{ transform: scale(0.9); height: auto; transform-origin: left; transition: transform 0.3s ease-in-out; } .logo-2{ height: 0; overflow: hidden; } .sticky .logo-1{ display: none; } @media only screen and (max-width: 1024px) { .admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{ top: 32px; } } @media only screen and (max-width: 782px) { .admin-bar .elementor .elementor-element.sticky, .admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{ top: 46px; } } @media only screen and (max-width: 600px) { .admin-bar .elementor .elementor-element.sticky, .admin-bar .elementskit-navbar-nav-default.elementskit-menu-offcanvas-elements{ top: 0; } } (function($){ $(document).ready(function(){ $(window).on('load scroll', function(){ var scroll = 100, sticky = $('.ekit-template-content-header, .elementor-location-header').find('.elementor-section') if ($(window).scrollTop() >= scroll) sticky.addClass('sticky') else sticky.removeClass('sticky') }) }) }(jQuery))
@adisharvit4260
@adisharvit4260 2 жыл бұрын
hi, great tutorial!!! question-how can I change the contact button color?? on the sticky header
@adisharvit4260
@adisharvit4260 2 жыл бұрын
and sub-menu colors.. and icons
@adisharvit4260
@adisharvit4260 2 жыл бұрын
sorry- not icon- submenu indicator
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
@@adisharvit4260 You can email me your website link. So, I can tell you the CSS code perfectly.
@adisharvit4260
@adisharvit4260 2 жыл бұрын
@@MakeDreamWebsite Hi, Couldn't find your email..
@shalzis
@shalzis 3 жыл бұрын
Thanks for a great video tutorial. Can you use any theme for this? I am thinking of using Astra.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Yeap, you can use it with any theme. I've also used Astra theme in this tutorial.
@shalzis
@shalzis 3 жыл бұрын
@@MakeDreamWebsite Thanks! Will try it out.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Welcome ❤️
@DvorcsakSzabolcs
@DvorcsakSzabolcs Жыл бұрын
Many Thanks! Wonderfull job and description. You have help me out a lot. I really appriciated Mr. Jitu Raiyan!!! GOD BLESS!!!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You're welcome!
@Laura-d9j2v
@Laura-d9j2v Жыл бұрын
Thank you very much for this video! I'm so glad I was able to apply this to my site as well.
@norakastein6883
@norakastein6883 2 жыл бұрын
Hi, Many thanks for this clear and fantastic tutorial, I followed every step. I do have a problem: after I paste the code, the header doesn't get sticky. Is there maybe a setting or update which need changing..? Pls advice. I look forward to finish the full tutorial.
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
As thus is an old video and so many Elementor updates are going through, so I can't garuntee everything is now perfectly working. For now, you can email me your page link...
@animesenpai-d2y
@animesenpai-d2y 3 ай бұрын
very good video and straight point
@MakeDreamWebsite
@MakeDreamWebsite 3 ай бұрын
🙏
@valentineakho5755
@valentineakho5755 3 жыл бұрын
Hi! I just tried to do it and I am pretty sure I didn't miss anything you did but it's not sticky at all... Do you know how I can manage that? Thank you
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
If you share your website link then I can find out your problem..
@mysz1010
@mysz1010 3 жыл бұрын
@@MakeDreamWebsite I have the same problem :/
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Which theme do you use?
@DXavinash
@DXavinash Жыл бұрын
@@mysz1010 Is this sorted, cozi have the same issue. btw i am using astra pro theme.
@עידןיעקובוב-ב8ח
@עידןיעקובוב-ב8ח Жыл бұрын
Thank you so much!! The header in mobile can be also transperenti?
@kipronoalex1447
@kipronoalex1447 2 жыл бұрын
One of the best header tutorial..budy very thanks... any recent updates.
@MartinIyooh
@MartinIyooh 2 жыл бұрын
Great video... Thank you xo xo much
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Welcome!
@nimishamohan1834
@nimishamohan1834 3 жыл бұрын
Very Helpful video....detaily described each points..Learned new things and methods...Thank you sir
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Most welcome...
@kamusiimeraymond314
@kamusiimeraymond314 3 жыл бұрын
Amazing stuff bro. You have saved many. Thank you so much
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome ❤️
@bonjoydemo
@bonjoydemo 2 жыл бұрын
Hi, The navbar is not changing color when scrolling, do you know the correct CSS id? Thanks
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Are you using the new flexbox container
@bonjoydemo
@bonjoydemo 2 жыл бұрын
@@MakeDreamWebsite No, how do I use that?
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
@@bonjoydemo No, you don't need to use that. I'm just asking. I thought the reason of the the issue was the flexbox. Okay... I think maybe you did something wrong when following the tutorial or there can be a plugin which make the conflict I guess...
@bonjoydemo
@bonjoydemo 2 жыл бұрын
@@MakeDreamWebsite can you share your css id for the navbar?
@movieskill-tworzniefilmowp3921
@movieskill-tworzniefilmowp3921 Жыл бұрын
@@bonjoydemo did u fix this? i have same problem. :\
@rafiqshakiran8798
@rafiqshakiran8798 2 жыл бұрын
Hello sir, thank you for your tutorial but my sticky header doesnt work.. it stays transparent when i scroll down, the white background does not appear
@mdnomanurahmad8436
@mdnomanurahmad8436 Жыл бұрын
thanks for this video. It was very helpful for me and I hope that you will continue making videos for us
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Thank you, I will😊
@moiseat
@moiseat 3 жыл бұрын
great video, thank you so much! what extension are you using to check the responsiveness?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Welcome ❤️ That's not an extension. In Chrome browser, right click anywhere on your page and click on Inspect. Then, press "Ctrl+Shift+M", and you get that responsive tool.
@fabianapellin3343
@fabianapellin3343 2 жыл бұрын
Fantastic video! I have a question on changing the color of the button text and border from white to black when i scroll down, how can I do that? Many thanks in advance!
@ravelomanarivoemma1031
@ravelomanarivoemma1031 Жыл бұрын
Thumbs up. You saved me. You got one more subscriber
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Thank you! Happy to help!
@ravelomanarivoemma1031
@ravelomanarivoemma1031 Жыл бұрын
@@MakeDreamWebsite The header style doesn't apply from other pages 😕
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
@@ravelomanarivoemma1031Usually the header supposed to be applied for all the pages... If you want to apply different header for different pages.. you can also set that from the plugin options...
@Jay16872
@Jay16872 3 жыл бұрын
Have gotten yourself a subscriber. I have Elementor Pro, and their patented method of using css to make a sticky header does not work. The sticky effect code makes it so the header is constantly active whether or not you have scrolled yet. Thank you for this, I have been trying for days to get this working and this solved it.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Aahhh, I see. I will publish the Elementor Pro version of this tutorial very soon.
@Jay16872
@Jay16872 3 жыл бұрын
@@MakeDreamWebsite Looking forward to that. Just a question, my header is staying transparent on Mobile... it sticks but doesn't transition to the color I specify like on desktop
@alexisdauli8537
@alexisdauli8537 3 жыл бұрын
Thanks man, this is the best video on this topic.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome ❤️
@SheikhSohel
@SheikhSohel 2 жыл бұрын
It's an awesome video for making a header transparent and sticky. Thank you.
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
You're very welcome!
@kunalkrmathuri
@kunalkrmathuri 2 жыл бұрын
thanks for sharing your valuable knowledge, it really helpful bro...........keep it up ...
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
You're welcome
@Shabbirahmed.VocalVerse
@Shabbirahmed.VocalVerse 7 ай бұрын
hello dosto kya mujhy koi bata sakta hay ke main elementor ka jo header footer plugin hay us se ek navbar bana raha hun sticky nav bar hay lekin ek problem hay us main jab main editor open karta hun to who content ke pichy araha hay lekin jab view page karta hun to us pe thek se araha hay mujhy guid kar sakty hen sirf home page pe is tarha ho raha hay????? pleace agar janty hen to zaroor bataen
@David-dk2jk
@David-dk2jk Жыл бұрын
you are literally the best
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Many thanks!
@karteltech
@karteltech 3 жыл бұрын
You got yourself another subscriber. congrats.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Thanks Albert
@orkunyoutube
@orkunyoutube 3 жыл бұрын
really good explanation ! thx mate !
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Glad it helped!
@katcd1916
@katcd1916 3 жыл бұрын
Hello, thank you so much for this tutorial!! I still have a problem, the hamburger menu doesn't show when I scroll down... do you know how to fix this? thank you
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You can make the header section sticky from the section advance settings. So, it will always shows up at the top when you scroll down or not.
@bulakiwaala
@bulakiwaala 3 жыл бұрын
Thank you for helping us out
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome
@A.elhaija
@A.elhaija 3 жыл бұрын
Hello i have this issue whenever i insert the HTML code widget into the header i get this white line on the top as a margin that won't go, please help to resolve this issue.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
It shouldn't have any problem. You probably do something wrong. Whatever, you can take a new section under the header main section and insert that html widget in that section. And for that new section make the Column gap: No gap. That should also work.
@A.elhaija
@A.elhaija 3 жыл бұрын
@@MakeDreamWebsite Thank you the problem was only with Column gap , best support and quick response
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
@@A.elhaija You're welcome. It that problem solved now?
@Cezar15
@Cezar15 2 жыл бұрын
Hi, i do this for my website and is awesome, but i have a question. How i manage the next pages on the website to look good? Because the edit page start from the header, and then the header doesn't work in other pages . How can you help me here ?
@sabahraffik3286
@sabahraffik3286 3 жыл бұрын
hi bro , very nice job thank1 with me while scrolling the menu items color dos not change color to black?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You can change that from line number 16 of the custom CSS, if it still doesn't work you can use - important. Example - color: #000000 ! important;
@sabahraffik3286
@sabahraffik3286 3 жыл бұрын
@@MakeDreamWebsite thank you, color:#000000 ! important it works very well. I have with the logo issue because both logo in same column after scrolling the both are not come in same point ! don't know how you didi it I did exactly same as what you did
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
@@sabahraffik3286 Did you put the logo-1 and logo-2 class for those logos respectively? Then it should work properly. If it didn't work, you can send the link of your page, I'll try to figure out that problem.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
@@sabahraffik3286 You can make the logo position same by removing the code on line no. 23. transform: scale(0.9); Remove this line.
@PeteUdemezue
@PeteUdemezue Жыл бұрын
This is a value packed video. What size did you use for your logo? My logo size seem to be too big.
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You can adjust the height/width to make it small...
@trademaze
@trademaze 3 жыл бұрын
With great appreciation, thank you for the tutorial. It was educative. Thank you.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome ❤️
@kankanalasravanthi5600
@kankanalasravanthi5600 3 жыл бұрын
Thanks For the Video. Very very helpful
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome ❤️
@renniesampan9302
@renniesampan9302 2 жыл бұрын
Thank you, awesome video... I have subscribed
@roicarl
@roicarl Жыл бұрын
This is one excellent video in all respects!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You're very welcome!
@Dcreations-zh1rc
@Dcreations-zh1rc Жыл бұрын
how do I add the logo inside the flyout menu in the mobile view?
@carolinepando2552
@carolinepando2552 Жыл бұрын
What if I dont use "Elementkits"? Does it work with the "Elementor header and footer builder"?
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
Yes, you need ElementsKit plugin or if you have Elementor Pro that's also fine
@AbdulkadirTekin
@AbdulkadirTekin Жыл бұрын
man, thank you very much firstly, it is really a nice guide video. But i have a problem. When i give the negative margin, my red temporary piece is coming to front of the menu. So my menu is dissappearing and staying under the red zone. What am i doing wrong? Can you help me please?
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You need to increase the z index of the header section...
@owaissonija7339
@owaissonija7339 6 ай бұрын
Subscribed!! Thanks for the video!
@MakeDreamWebsite
@MakeDreamWebsite 6 ай бұрын
You’re welcome!
@sreenuneelakanthi3943
@sreenuneelakanthi3943 3 жыл бұрын
Really Helpful !! Thank You
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Welcome ❤️
@stefanyo8065
@stefanyo8065 3 жыл бұрын
Hi, I will like to know, how to make align my meny with my logo, please if you can help me!
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Make the section's(header section) Vertical Align: Middle.
@stefanyo8065
@stefanyo8065 3 жыл бұрын
@@MakeDreamWebsite Thanks for answering! What theme are you using for this tutorial?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
I have used Astra theme in this tutorial.
@stefanyo8065
@stefanyo8065 3 жыл бұрын
@@MakeDreamWebsite Sorry for making you a lot of questions... but I don´t know why my menu doesn´t work.. I use the Astra Theme and follow the exact steps for you tutorial.... The secomd menu doesn´t align with the logo and the buttons don´t change the color
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
There can be many reasons. If you give your website link I can find out your problem
@stanislasbaygon7476
@stanislasbaygon7476 4 ай бұрын
Hi. Can you update this tuto for the flexbox, please? Thanks for the awesome work btw.
@MakeDreamWebsite
@MakeDreamWebsite 3 ай бұрын
Okay! I’ll update it soon!
@shahinaparveen8712
@shahinaparveen8712 2 жыл бұрын
New and used full information thanks
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
You're very welcome!
@sarojadhikari5062
@sarojadhikari5062 Жыл бұрын
Thank you for great video.. but how to add smooth fade in animation on header when scroll
@artfabre80
@artfabre80 3 жыл бұрын
Amazing!! I have a problem, can't changing the color of the background, could you help me??
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
After the color code write !important Hope that will work.
@darylchua7663
@darylchua7663 3 жыл бұрын
I cant change the background color of sticky header after scrolling, any help? Tried to change the HTML code but not working after update and refresh
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Can you share the link of your website? So, I can find out your problem.
@stupidtubeification
@stupidtubeification 3 жыл бұрын
Same issue with my site. All other changes show a effect (for example the box shadow changes when applying e.g. 50px instead of 30px) but changes to the background color does not work... Any ideas?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
@@stupidtubeification You can use !important after that background color code (line no: 3) if that doesn't work at all. Like this: background: #FFFFFF !important;
@stupidtubeification
@stupidtubeification 3 жыл бұрын
Thanks for your quick reply. Thought about the issue when going to bed, tested it just in the morning and solved the problem. When setting the header transparent the background must be empty! Setting the color to full transpareny will also set the background color in the sticky part completely transparent causing this behaviour. So my fault 😀
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Yeah, glad to know that your problem is fixed. Not only that you also figure out the reason. That's awesome ❤️
@doctorvac1755
@doctorvac1755 Жыл бұрын
Hello man, really nice video, but there is one thing thats different for me, when i start changing the margin bottom number, it automatically changing equally the top number too, any idea? Im kinda hopeless. Thank you a lot!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You need to uncheck the clip icon right beside that margin option
@doctorvac1755
@doctorvac1755 Жыл бұрын
@@MakeDreamWebsite Oh i see, i didnt notice you doing it in the video, sorry man, anyways this is one of the best wordpress guides ive seen so far, not even tutorials in my language helped as much as yours. Keep up the great work dude, you got my like and sub!
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You're very welcome!
@doctorvac1755
@doctorvac1755 Жыл бұрын
@@MakeDreamWebsite May i yet ask what Theme do you use? I had some issues to display the background on mobile/tablet. Possibly im doing something wrong?
@AhmedSiddieg
@AhmedSiddieg 11 ай бұрын
awwsome, thanks I was looking for this
@MakeDreamWebsite
@MakeDreamWebsite 11 ай бұрын
You're welcome!
@ThatsmeChristian
@ThatsmeChristian Жыл бұрын
I got everything right until the injection of the html snippet. But The header does not become sticky :(
@siasuryawanshi7550
@siasuryawanshi7550 Жыл бұрын
Sir mene elementor kit download nahi . Kiya toh hoga kay
@jondreger9705
@jondreger9705 2 жыл бұрын
Thank you very much. Kind regards from Germany 🙌🇩🇪
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Very Welcome!
@Annons9000
@Annons9000 2 жыл бұрын
Great video, thanks bro, but one problem, my nav menu text does not change color, so it stays white..
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
Email me that page link
@Annons9000
@Annons9000 2 жыл бұрын
@@MakeDreamWebsite hi, I already found another solution
@lookmanschannel4092
@lookmanschannel4092 Жыл бұрын
Brother, ther is no 'positioning' menu (advance) in my elementor, how to enable it? thanks
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
After Elementor update, it shifted to the upper part of the Advanced tab...
@dushhyant
@dushhyant 3 жыл бұрын
Amazing tutorial but I have a question this transparent header doesn't work well with blog posts and archive page.please suggest a work around that.
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Yeah, for blog and archive pages you can set the nomal(non-transparent) header. But, "different headers for different pages" feature is only available in Elementor Pro. This, plugin best fit for one-page website.
@Yashbhasin31
@Yashbhasin31 3 жыл бұрын
Hello bro i need your help, I did everything you told on video, when im starting my website some white lines are coming up, can you help on this?
@antoniobortolussi5686
@antoniobortolussi5686 2 жыл бұрын
Hello nice tutorial i have a question. my header works perfectly in transparency and when it has to stick, but all the photo and text every time i scroll goes on top of it can you help me with a solution? thanks again
@DanO-xy8wh
@DanO-xy8wh 2 жыл бұрын
You need to make sure the header element is highest number in Z-index. Otherwise other elements will be on top when you scroll
@El_Shago
@El_Shago 3 жыл бұрын
How can I select the menu created with elementsKit and not the menu I had created with elementor. I mean, I created a menu w elementskit but still shows the old created w elementor. thanks for this amazing tutorial.
@El_Shago
@El_Shago 3 жыл бұрын
I just had to turn on the menu created in ELementsKit, my bad , but if it helps someone remember to turn on the menu created so it apply to all your site.
@tmarks1711
@tmarks1711 2 жыл бұрын
Thanks for this tutorial. Can you please help me? I have created a Transparent Sticky Header with white text, but when you scroll up, I want to change the text color to black because it has a white background when you scroll up, and the text becomes invisible (Has white color on the text). How can I change the text change from white to black? Tach, for the help
@sulthanahmadr
@sulthanahmadr 4 ай бұрын
why my elementskit navbar not appear on my front page?
@OrangeartFactory
@OrangeartFactory 2 жыл бұрын
how to add gtranslate in mobile menu only?
@bosaoctavian7774
@bosaoctavian7774 3 жыл бұрын
Thank you for the tutorial !
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Most welcome 😊
@massoudatef7267
@massoudatef7267 Жыл бұрын
When I select ElementsKit - header footer it directs me back to the ElementsKit dashboard I am not sure what's going on?
@abdulraheem2205
@abdulraheem2205 3 жыл бұрын
How to stop the scroll in mobile/tablet view while side menu is open ? . When I scroll in mobile/tablet view with open side menu styling is disturbed may be due to sticky header. Any help ?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
That may be happening for some specific reason. i can't tell the exact reason without seeing your website.
@NatureScenicViews
@NatureScenicViews 3 жыл бұрын
Hi thanks for the tutorial but it makes a problem when I upload an article then it is also pushed to the header making a messy look as we have given -90 or more margin to the header, any solution, please. Eagerly waiting, my design stuck?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
This transparent header fits perfectly for one-page website. For multipage website I recommend to use Elementor Pro where you can show different header on different pages.
@NatureScenicViews
@NatureScenicViews 3 жыл бұрын
@@MakeDreamWebsite I have pro version
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Ok.. then you can make sticky header using the sticky feature. I have also made a tutorial, how to make a transparent sticky header using Elementor Pro. Although these 2 headers are not exactly same, but you can check this out.
@NatureScenicViews
@NatureScenicViews 3 жыл бұрын
@@MakeDreamWebsite I will, will you give me link of that video because maybe your channel have multiple tutorials regarding this title
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
@@NatureScenicViews This one: kzbin.info/www/bejne/b6euiIadqr5sasU
@David-dk2jk
@David-dk2jk 4 ай бұрын
does this work with flexbox containers? i am trying to use the html code but it's not working
@MakeDreamWebsite
@MakeDreamWebsite 4 ай бұрын
As it was made when flexbox is not arrived so this code snippet is only applicable for section/column. I’ll have a look if there is any way to update the code so it will also support container…
@David-dk2jk
@David-dk2jk 4 ай бұрын
@@MakeDreamWebsite if you could do that, it would be amazing, thank you.
@abramozanasi3017
@abramozanasi3017 Жыл бұрын
Hi there, amazing and useful content! Unfortunately, looks like it is not possible to use "Nav menu" for free anymore. Is there another solution to not use any pro version? Thank you
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
The Nav Menu is Free if you use the ElementsKit plugin
@TochiMichael
@TochiMichael 3 жыл бұрын
This is a wonderful video, buh the sticky header doesn't work on mine. Please help
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
Which theme do you use?
@ak-up8fg
@ak-up8fg Жыл бұрын
@@MakeDreamWebsite astra
@felixblub4401
@felixblub4401 3 жыл бұрын
You are so great for doing this, thank you very very much!! Best wishes from Germany!
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
You're welcome ❤️
@leomarkconstantino4451
@leomarkconstantino4451 2 жыл бұрын
I am lost when I did the red color part after I remove the section all the section were remove
@MakeDreamWebsite
@MakeDreamWebsite 2 жыл бұрын
You need to do it carefully. If you do anything wrong press CTRL + Z to undo. It will be better if you open the Navigator and handle the things from there as these 2 sections are overlapping.
@alexmugereki777
@alexmugereki777 Жыл бұрын
Thanks its very helpful
@MakeDreamWebsite
@MakeDreamWebsite Жыл бұрын
You're very welcome!
@gkraintechworld
@gkraintechworld 3 жыл бұрын
Please! When I paste the code and clicked update, it brings "server error: 404 not found!" Please can you help me with this?
@MakeDreamWebsite
@MakeDreamWebsite 3 жыл бұрын
There shouldn't be something wrong with this code, these issue may be caused from other places.
@thesparkyguy9378
@thesparkyguy9378 3 жыл бұрын
Hey awesome video btw how to make the menu dropdown for mobile devices instead of sliding ??
Changing Headers On Scroll with Elementor Sticky Headers
11:11
Jeffrey @ Lytbox
Рет қаралды 140 М.
How to create a Transparent Sticky Header in WordPress with Elementor
10:13
人是不能做到吗?#火影忍者 #家人  #佐助
00:20
火影忍者一家
Рет қаралды 20 МЛН
Mom Hack for Cooking Solo with a Little One! 🍳👶
00:15
5-Minute Crafts HOUSE
Рет қаралды 23 МЛН
toturial cara menguplod vidio panjang 🙈🤫🧏‍♀️
3:39
How To Create A Sticky Header In WordPress
6:11
Website Learners
Рет қаралды 206 М.
How to create a Blurry Transparent Sticky Header in Elementor
13:06
Rino de Boer
Рет қаралды 121 М.
How to Build Headers and Footers Using Elementor for FREE
23:07
Riad Mahmud
Рет қаралды 90 М.
Creating a Custom Animated Sticky Header in Elementor Pro (step by step)
19:13
人是不能做到吗?#火影忍者 #家人  #佐助
00:20
火影忍者一家
Рет қаралды 20 МЛН