[FREE] How to Create Transparent Sticky Header in WordPress with Elementor
HTML-код
- Опубликовано: 12 сен 2024
- In this tutorial I'll show you how to Create Transparent Sticky Header in WordPress with Elementor.
✅Get code snippet for making Sticky Header:
makedreamwebsi...
✅Get Elementor Pro:
makedreamwebsi...
✅Get ElementsKit Lite:
wordpress.org/...
✅Get ElementsKit Pro:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
Today, I’ll show you how you can make sticky transparent header in Elementor for Free. So, normally, you can create this type of sticky transparent header in Elementor Pro. But, I’ll show you how you can do that on the free version of Elementor with a little hacks.
Here, first you need to install the Elementor and the ElementsKit Lite plugin on your website. Then, you can create custom header with Elementor Editor. We create a header with logo, menu, button and social icons. Then, we'll make the header transparent header by using negative margin.
After that, to make the header sticky, we use some custom CSS and JavaScript code which you can get from my link above. We use CSS class for our 2 different logos - one for transparent header, another for sticky header.
We can also customize the background color and text color of our sticky header from our code. I've shown you how to change that.
After that, we make our header responsive for mobile and tablet devices. Here, we create 2 different menus - one for desktop and another for tablets and mobiles.
So, that’s how you can create a transparent sticky header on your WordPress website.
![Free Elementor Sticky Transparent Header Tutorial. [Sticky Header On Scroll Effects] No CSS, No BS😜](http://i.ytimg.com/vi/-fMpH_aKRcI/mqdefault.jpg)
![How to Create Transparent Sticky Header in WordPress with Elementor [FREE]](http://i.ytimg.com/vi/kq8OM7L3i-0/mqdefault.jpg)
This is the best video I've seen for making Header with Elementor. Thanks!
Thank you so much❤️
@@MakeDreamWebsite TOOOP
@@MakeDreamWebsite loveeeee u bruh
can you make a vedio about how to recive order and how to make a order form in wordprees pls .
bhai creating menu is not showing on my website@@MakeDreamWebsite
This is the best video in youtube for making header with Elementor. Hats off mate!
Glad you liked it!
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.
I'm also glad to know that really helps you..
I got everything right until the injection of the html snippet. But The header does not become sticky :(
I'm also stucked in there. New elementor update is the problem
x3
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.
Thank you Pruthvi 😊
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!!!
I love you 😂😂😂😂, thanks for this video, just saved my life 😂😂🔥🔥🔥🔥🔥💜💜, best video on elementor menu ever 🔥🔥🔥
Haha.. you're welcome
can u make a code for container please, cozz this is not work for it, thank u
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!
Thanks for your valuable comment ❤️
The code is not working
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))
You are really amazing! Nobody has made a video like you did! Clearly understandable..!
Thank you so much 😀
Undoubtedly the most informative video.
Thanks a ton ❤️
I am not able to get primary menu option, any suggestions? It is showing up only menu option..
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
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.
The video is cool and straight forward for even a newbie to use
Thank you!
I am very fresh on wordpress and you made may day man.
Awesome! Thank you!
With great appreciation, thank you for the tutorial. It was educative. Thank you.
You're welcome ❤️
Great work! However, the transparent sticky header does not work properly with the flexbox container.
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
Same problem here
Thank you very much for this video! I'm so glad I was able to apply this to my site as well.
I have only one simple word to describe your efforts...just wowwww amazing Loved that
Thank you so much
Amazing stuff bro. You have saved many. Thank you so much
You're welcome ❤️
You're a absolute gem.
Thanks a lot!
It's an awesome video for making a header transparent and sticky. Thank you.
You're very welcome!
sir theres a slight transparent black line coming from menu side . So how can we fix that
Same Problem here
Thanks man, this is the best video on this topic.
You're welcome ❤️
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.
Aahhh, I see. I will publish the Elementor Pro version of this tutorial very soon.
@@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
very good video and straight point
🙏
Very Helpful video....detaily described each points..Learned new things and methods...Thank you sir
Most welcome...
Many Thanks! Wonderfull job and description. You have help me out a lot. I really appriciated Mr. Jitu Raiyan!!! GOD BLESS!!!
You're welcome!
thanks for this video. It was very helpful for me and I hope that you will continue making videos for us
Thank you, I will😊
wow bro, Thanks.
You're welcome!
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?
Same here
Thank you for helping us out
You're welcome
Subscribed!! Thanks for the video!
You’re welcome!
Thanks For the Video. Very very helpful
You're welcome ❤️
why my elementskit navbar not appear on my front page?
really good explanation ! thx mate !
Glad it helped!
Great Video, exactly what I was looking for! Thank You SO Much!
You're welcome!
Awesome! Fresh and clear content. No spiler ❤️👍
Thanks so much!
but the problem when the page load it is showing nothing then we need to select one option to show something. Can you please fix this problem?
Thank you very much. Kind regards from Germany 🙌🇩🇪
Very Welcome!
One of the best header tutorial..budy very thanks... any recent updates.
thank you for informations, But that html code not working . please help me!
The HTML is also not working for me 😢
Thumbs up. You saved me. You got one more subscriber
Thank you! Happy to help!
@@MakeDreamWebsite The header style doesn't apply from other pages 😕
@@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...
You are so great for doing this, thank you very very much!! Best wishes from Germany!
You're welcome ❤️
Why the wall is red on ELEMENTOR and on the website there is a photo?? I don't understand.
Really Helpful !! Thank You
Welcome ❤️
Amazing tutorial man!! Btw, How to make the Navigation bar both have background color? All I can see is if you scroll down, the Navbar gets the background color of choice, but at the start its invisible.
Hay hi,
can you please tell how to remove the grey slider animation when we click the HM.
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
@@cryptonite6000 same problem for me too
.elementskit-menu-overlay {
display:none !important}
Throw that in your global CSS file mate
@@cryptonite6000 thanks mate.
unfortunatly my menu color doesn't change even i change it in the code.
what should i do?
Thank you, awesome video... I have subscribed
This is one excellent video in all respects!
You're very welcome!
thanks for sharing your valuable knowledge, it really helpful bro...........keep it up ...
You're welcome
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!
awwsome, thanks
I was looking for this
You're welcome!
You got yourself another subscriber. congrats.
Thanks Albert
you are literally the best
Many thanks!
The problem I had with this was on the tablet and mobile. It doesn't resize properly if at all. I tried following your instructions for the mobile version but that didn't work either. I'm not having much luck with this elementor menu at all. It's horrible!
When I select ElementsKit - header footer it directs me back to the ElementsKit dashboard I am not sure what's going on?
Thanks its very helpful
You're very welcome!
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 ?
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
Thank you so much!!
The header in mobile can be also transperenti?
Best video ever ❤️
Thank you ❤️
sir, my header doesn't show in my pages. I have followed your video untill end, pls help me for the solution
This video is very useful, but I have a problem. after putting the sticky header code on the scrolling header is transparent, I put white color but still it transparent. pls help me out with this
Thanks for this amazing video
Welcome!
how to add gtranslate in mobile menu only?
Thank you for the tutorial !
Most welcome 😊
New and used full information thanks
You're very welcome!
Why i cant do transperenty in sticky header , its make big width
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?
I need to take a look on your current website. Then, I can suggest you to write some additional CSS code for that.
Great video... Thank you xo xo much
Welcome!
Hi. Can you update this tuto for the flexbox, please? Thanks for the awesome work btw.
Okay! I’ll update it soon!
hello, It is not giving me the option to make the menu my primary menu, any issue with that?
I am lost when I did the red color part after I remove the section all the section were remove
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.
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
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.
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...
Very helpful, thank you!
Thank you too!
This is a value packed video. What size did you use for your logo? My logo size seem to be too big.
You can adjust the height/width to make it small...
you really helped me alot... thanx bro!
Happy to help!
Thanks for a great video tutorial. Can you use any theme for this? I am thinking of using Astra.
Yeap, you can use it with any theme. I've also used Astra theme in this tutorial.
@@MakeDreamWebsite Thanks! Will try it out.
Welcome ❤️
Thanks Man!
You're welcome!
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 ??
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
Why does the Image element need a Z-Index to be visible when the header was made transparent but the nav menu was visible without a Z-Index?? Can someone explain please??
Thank you for great video.. but how to add smooth fade in animation on header when scroll
Please! When I paste the code and clicked update, it brings "server error: 404 not found!" Please can you help me with this?
There shouldn't be something wrong with this code, these issue may be caused from other places.
For menu button I think it’s best practice to make button as a menu item and custom style it.
The best I've seen. Concise and learnable. Thank you for sharing such a useful tip.
Please, I'm having a problem with the swift transition. Is there a way I can slow down the transition between the transparent to the color? Thanks a bunch.
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?
Hey awesome video btw how to make the menu dropdown for mobile devices instead of sliding ??
Hey, i am trying to rebuild the header but i got a problem. The colors of the menu change after scrolling down but the background colors of the header is not changing. Does someone know what could be the problem? Thank you!
How does your inspect page option give you a dropdown for various screens to test how it looks? Is that Chrome?
Yes, that was Chrome Browser. After inspecting press Ctrl + Shift + M. Then, you get that dropdown.
Wooow!!! Amazing... thanks so much
You're welcome
how to bring the cart search and account sections on the header back?
Thank you very much...
Very welcome
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.
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.
@@MakeDreamWebsite Thank you the problem was only with Column gap , best support and quick response
@@A.elhaija You're welcome. It that problem solved now?
After doing menu in elementskit lite, how did you bring it on Wordpress theme? and how did you remove default header of Wordpress theme
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.