Elementor Pro Header Tutorial - Sticky Transparent Headers Hello Theme

  Рет қаралды 141,131

WPTuts

WPTuts

Күн бұрын

Elementor Pro Header Tutorial with Hello Theme.
Learn how to build a sticky, transparent header with Elementor Pro and the stripped down Hello theme for #Elementor. This easy to follow Elementor Pro Tutorial will help you become a WordPress ninja in no time and.
This comprehensive Elementor Pro Header Tutorial will show you how to make transparent headers, sticky headers and a custom header with the Elementor Theme Builder tools.
Take your #WordPress website and skills to the next level!
AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
- GeneratePress Premium: bit.ly/2Ydn1SE
- Crocoblock: bit.ly/2BD7e6E
- Pre Order Brizy Pro NOW: bit.ly/2Ji97r8
- OCEANWP: bit.ly/2fRHBr0
- ELEMENTOR PRO: jo.my/1s0t2s2
- WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
- DIVI 3 Page Builder: bit.ly/2HiiDcE
- DIVI Theme: bit.ly/2G8JMiA
- SMART SLIDER 3: bit.ly/2G0G1vB
- Astra Pro: bit.ly/2zruoKn
- CSSHERO: bit.ly/2qbrRl6
- SLIDER REVOLUTION 5 - bit.ly/2NYr8NV
- IMPREZA THEME: bit.ly/2mpK9wp
SUBSCRIBE
bit.ly/2rX7rhu
LETS CONNECT:
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

Пікірлер: 237
@WPTuts
@WPTuts 5 жыл бұрын
Build your WordPress website from a clean slate with Elementor Pro and the Hello theme! Learn how to create your own transparent and sticky headers with ease!
@sivakrishnajadda2231
@sivakrishnajadda2231 5 жыл бұрын
hii sir,how to import that template to page
@sg_vloggs
@sg_vloggs 5 жыл бұрын
Hi! How to add Bottom Shadow in Sticky Header after scrolling?
@denniszenanywhere
@denniszenanywhere 3 жыл бұрын
Good tips. Did you do the Nav Menu on Wordpress or Themebuilder? I noticed that when I use Themebuilder, there's a duplication of the menu that happens and I cannot get rid of the Wordpress menu. Which means I cannot use Themebuilder as it will only duplicate the menu. How can I solve this?
@bjansson
@bjansson Жыл бұрын
Sticky Header Effects for Elementor doesn't work like it should anymore. The menu doesn't shrink, bottom border doesn't work, etc... I've had this happen on all of my Elementor websites. :/.
@TottoHolm
@TottoHolm 3 жыл бұрын
This worked like a charm! Thank you so much, been fooling around the settings of Elementor for some hours now trying to figure it out. Only wish I found your video first :) Haha.
@jasonkarasev781
@jasonkarasev781 4 жыл бұрын
This was insanely helpful, thank you so much!
@baguapalm
@baguapalm 5 жыл бұрын
Hello Paul I missing feature to this plugin is the ability to change the color of the logo while scrolling. Do you know if they plan to implement it? Thanks anyway for your clean & easy to follow tutorials.
@stephanieclark9049
@stephanieclark9049 3 жыл бұрын
kzbin.info/www/bejne/jovMpIlpeMyjaZY
@MrThresher7
@MrThresher7 5 жыл бұрын
Excellent tutorial for newbies! You earned a new subscriber mate! BRAVO - Big Cheers :)
@BD-hy8bl
@BD-hy8bl 4 жыл бұрын
Came acroos after almost a year. Great one! Thank You. Saved me in still in 2020 (the Free Plugin untested with Current Updates on Elementor & WP) tons of time & still not using any template rather than Hello theme... by Any Chance a few questions: -95% why not -100% to the top? and when i activated Shrink: By Scrolling back to top Whole header dissapears. is this the reason why you used - 95? and if I use -95% i see a Gap of 5% in White behind the Header Section. Any tips would be Great. Thanks. Bernie.
@jeansienkin
@jeansienkin 4 жыл бұрын
He used px, not %.
@binyamindadoun6007
@binyamindadoun6007 4 жыл бұрын
Thank you for the video! Can you make a tutorial on how to make that effect more flexible? such as the color of the text changes too...
@danieljan4572
@danieljan4572 3 жыл бұрын
wowww thank you very much , I've tried many times to do that . finally !
@destinyalabi3820
@destinyalabi3820 4 жыл бұрын
Thanks for the tutorial. while I find it very helpful because no knowledge is wasted, I want to ask specifically, this tutorial satisfy from a transparent to a dark background or any other background colour, I am looking for how I can control not just the background but also the menu colours. This would be very helpful
@davidwalls2304
@davidwalls2304 3 жыл бұрын
@WPTuts, Paul I was searching for something else but came across this video. Although it isn now almost 2 years old, it gave me some ideas to improve my clients headers. Thanks!
@trailoftheark4807
@trailoftheark4807 2 жыл бұрын
Way to go! Only wished I came across your excellent tutorial before spending many wasted hours. Thanks!
@rocaivan
@rocaivan 5 жыл бұрын
When using Sticky header effect plugin, the menu is not responsive when resizing the browser window. Please try to resize browser to check out. Any way around that?
@blahblahbleh3235
@blahblahbleh3235 4 жыл бұрын
Of course :) Use media queries
@mariannecurran6367
@mariannecurran6367 4 жыл бұрын
1. My heaader completely disappears when scrolling back right to the top. 2. Can you put a top bar over the top of this transparent header? Elementor has a video about the new header and footer says you can but when i go to add another row it doesn't work
@haraldhacker
@haraldhacker 4 жыл бұрын
same behavior when i try to use the Shrink effect for the stick header plugin....
@tallertoler
@tallertoler 4 жыл бұрын
As always, your tutorials are arguably the best Elementor tutorials on the Internet. You explain everything with such clarity that after a quick watch through, I can easily recreate what you did and customize my own. I am super pumped to see you making tutorials for Crocoblock as well. I love their suite of plugins and their support. To have you making their videos as well is truly a perfect fit, and was an incredibly judicious choice on their part.
@WPTuts
@WPTuts 4 жыл бұрын
Wow, thanks! I'm super pleased I could get the collaboration with Crocoblock in place too. :0)
@stevechong65
@stevechong65 2 жыл бұрын
Thank you so much for the video! Its precious, not a single min was wasted on unimportant stuff! I learned a great deal!
@wellnix53
@wellnix53 5 жыл бұрын
Looks great. Will definitely use this to create different looks and colors for different times of the year. Also, has anyone else noticed an increase in speed after the latest WP update? After the update and install of the latest PHP version, my sites increased roughly 40% in load times. And that's all I did to the sites. Same Swift Performance cache plugin with a Bunny CDN. Lightning fast on Apache-Litespeed servers.
@richardjones5962
@richardjones5962 5 жыл бұрын
How would you then set a background image to be the whole background of the page that even goes up over the section where the header is? Example, if I want a nice night sky background how do I get that, in Hello Theme, to be the background of the entire page and the pages just float over the background so the background does not really move? do you have a tutorial on how to do that?
@sg_vloggs
@sg_vloggs 5 жыл бұрын
Hi! How to add Bottom Shadow in Sticky Header after scrolling?
@blahblahbleh3235
@blahblahbleh3235 4 жыл бұрын
CSS BABY :D
@BestMLMDXN
@BestMLMDXN 3 жыл бұрын
Hello Sir, Your videos are awsome, easy to understand. This video made work so easy without using a piece of code. Please make videos on Piotnet if possible. With regards, Vivek Kumar
@donalodomhnaill
@donalodomhnaill 3 жыл бұрын
Sir, your video is brilliant. You have literally solved every single one of the questions/problems. Honestly dude, thank you SO MUCH. I hav Elementor Pro but what you have done is shown me TONS more of what it is capable of. You have been added to my list of "How do get stuff done without the nonsense" videos. Liked and subed and I will be telling people about this BRILLIANT video. Thank you so much.
@WPTuts
@WPTuts 3 жыл бұрын
Awesome to hear that the video has helped you out. :)
@quantum_leap
@quantum_leap 5 жыл бұрын
Thanks for the tutorial. I had some issues with the Elementor header, I think the problem was when resizing the browser, it wouldn't span the full width of the window, maybe you can check that yourself. Anyway, after your viewing tutorial, I will try again!
@WPTuts
@WPTuts 5 жыл бұрын
I'll take a look and see if I have any issues. Were you using a particular theme / browser / way of building your header?
@rocaivan
@rocaivan 5 жыл бұрын
same here, any way around that? I'm using Hello theme.
@quantum_leap
@quantum_leap 5 жыл бұрын
@@rocaivan In my case using a different theme (GeneratePress + Premium extension) gave me more options to style the header menu and it worked like a charm.
@Nadworks-cb
@Nadworks-cb 3 жыл бұрын
At around 6:12 you set the top margin of your header to -95px. If I replicate that, it pushes my menu header out of sight at the top. However, if I set the bottom margin to -95px and increase the z-index, then I achieve what you are showing. Maybe this changed with recent Elementor updates?
@georgejackson4836
@georgejackson4836 4 жыл бұрын
I ve got problem. My page scrolls too high. When i scroll down and then maximally scroll up my Header disappears. Additionaly the background color is not invisible.....
@hareishthappa495
@hareishthappa495 5 жыл бұрын
You're genius, this helped me a lot. Thanks again.
@elipokeasarakikya1026
@elipokeasarakikya1026 5 жыл бұрын
That is lovely. May you prepare a tutorial on how to create a vertical sticky menu with elementor pro please..?? Thanking you know in advance
@ameliaphillips5975
@ameliaphillips5975 4 жыл бұрын
By far the most helpful tutorial on sticky headers; you answered exactly what I needed without over complicating or wasting my time. Thanks from a small business owner!! =D
@WPTuts
@WPTuts 4 жыл бұрын
Great to hear this helped answer your questions. :0)
@inspector-tech
@inspector-tech 4 жыл бұрын
Hi Paul. Quick question. What font are you using for your nav menu (top right-hand side)?
@ingeniousgoldie
@ingeniousgoldie 2 жыл бұрын
This plugin is just behaving crazily on my site. Nearly pushed me to frustration
@datbaguettedoe6436
@datbaguettedoe6436 2 жыл бұрын
Great video! Quick question: how do you make your sticky header NOT transparent at all, so the content of your page goes underneath it as you scroll?
@jacquespartouche
@jacquespartouche 3 жыл бұрын
Hi, great! I don't understand how we can put a "don't like thumb" at this excellent tutorial! Merci beaucoup
@Kemstylebossy
@Kemstylebossy 4 жыл бұрын
followed your steps but the header will not show when i publish it what am i doing wrong its driving me crazy
@ashlynstackhouse
@ashlynstackhouse 3 жыл бұрын
I love your videos, they've been so helpful in my web development. When I see you in the search results, I always go to you (and I rarely have favorites). Keep up the great work!
@WPTuts
@WPTuts 3 жыл бұрын
That's awesome to hear. Thank you :0)
@NatureScenicViews
@NatureScenicViews 3 жыл бұрын
All are explained well but I have a problem with doing this when I post an article the article was also pushed towards the header. Please, tell us their solution there is no single tutorial for that on youtube. Eagerly waiting for your reply?
@DeanKnight
@DeanKnight 3 жыл бұрын
I copied over this idea to an experimental website www.wpeveryday.co.uk and on mobile the hamburger menu is stuck in the centre. I cannot use the elementor controls to move it. Any ideas?
@paulgee3411
@paulgee3411 4 жыл бұрын
Fantastic. Really helpful.
@mmmhenrique
@mmmhenrique 5 жыл бұрын
The best tutor about sticky header using Elementor. Congrats and thanks!
@thats.secret
@thats.secret 3 жыл бұрын
Yes this method is a simple solution for everyone who are not familiar with css! But what are the advantage of doing it with css instead of the plugin ?
@stephanieclark9049
@stephanieclark9049 3 жыл бұрын
Video showing how to transition logo from white to color as you scroll and I think the menu copy as well! kzbin.info/www/bejne/jovMpIlpeMyjaZY
@AlexAtuh
@AlexAtuh 4 жыл бұрын
THANK YOU! I have been struggling for so long for something I thought was so simple lol
@lifeineight2921
@lifeineight2921 5 жыл бұрын
Great tutorial and very easy to follow along. Is there a way to use a different logo for mobile and tablet? Thanks 😊
@prleigh9389
@prleigh9389 5 жыл бұрын
You can use the image option instead of site logo then as you click the responsive icon, just change your image per device.
@nosbod153197
@nosbod153197 3 жыл бұрын
Do sticky transparent headers work when you have drop-down menus?
@johnmecham9855
@johnmecham9855 2 жыл бұрын
Any ideas how I get the menu to be on top of the content below it (using the negative margin) without selecting the "sticky option"?
@GregCoxTV
@GregCoxTV Жыл бұрын
Excellent tutorial. One of the best I've seen. One quirky thing I noticed - I had included some text in my header along with the nav bar, but only the nav bar remained semi-transparent. However, after I installed the Sticky Header Effects plugin everything worked as expected. I hope it still works when I upgrade from Elementor Pro 3.8.2
@GregCoxTV
@GregCoxTV Жыл бұрын
Another quirky thing - using Elementor Pro 3.8.2, I added a menu option to the transparent header and now, Template -->Theme Builder --> Edit header does not recognize the Sticky Header Effects plugin effect. But if I edit the home page it looks back to the way I had it with the sticky plugin. Not sure how to fix that.
@motionmanager
@motionmanager 4 жыл бұрын
Awesome thank you so much! Brilliant tutorial!
@danyalrajput
@danyalrajput 4 жыл бұрын
Thanks it was very helpful but i have a little problem when i scroll back to top my header does not show it only happens when i enable the shrink option otherwise its normal plz help.
@michaelwillman5342
@michaelwillman5342 4 жыл бұрын
Sadly the plugin used in this video is a year out of date, would have been far more helpful to cover how to do this in CSS instead as its timeless.
@TiloVentures
@TiloVentures Жыл бұрын
Great video…taking things to the next level, but without the techie coding… thank you
@stephann332
@stephann332 Жыл бұрын
The option to change the logos color on scrolling is amazing, but I can't seem to find an option to change the color of the text on scroll. Can someone help me with that?
@AhsanHabib-vt2dq
@AhsanHabib-vt2dq 4 жыл бұрын
you are talking so quickly, please try to make medium speed. but your lecture is good.
@TimelessTunesRewind
@TimelessTunesRewind 5 жыл бұрын
Hey was wondering if you have ever done a custom split menu header? I did but its not applying the colors for the menu settings? Do you know why?
@adilshehzad6520
@adilshehzad6520 5 жыл бұрын
Hi, I have a question. Can I use free themes like HELLO THEME and make a TEMPLATE using ELEMENTOR PRO. So through that can I Sell this Template on themeforest or another online selling platform.
@michaelladdey7074
@michaelladdey7074 3 жыл бұрын
How do you offset the negative margin in the nav at the bottom of the page if your 1st section content is full height?
@voxxel
@voxxel 4 жыл бұрын
One of the best tutorials for that!
@as-369
@as-369 4 жыл бұрын
Hi, I have quite a big problem with the plugin. Here is a post about it: elementorforum.com/threads/when-resizing-browser-also-the-editor-by-choosing-tablet-or-mobile-view-the-header-adds-an-extra-full-screen-white-element.4281/ Basically, if I leave the sticky effects from the startpage header unedited on subpages, the problem won't occur. If I switch off the options, this problem will occur. Any help on this? Thanks.
@as-369
@as-369 4 жыл бұрын
Okay, so problem solved for now. I needed to apply an extra line of code to the sub header (position: static !important;) and kill the __spacer attribute of your plugin (.elementor-sticky__spacer is not set to display: none). That solved the problem for now.
@pataslocas4595
@pataslocas4595 4 жыл бұрын
thanks you so much!!!
@giorgiadolfini338
@giorgiadolfini338 5 жыл бұрын
Thank you for a great tutorial!
@chandradominic1074
@chandradominic1074 3 жыл бұрын
really helpfull, Thanks a lot from Indonesia
@philgreenaway9142
@philgreenaway9142 4 жыл бұрын
Never know why I just don't visit WPTuts first. Always looking around for solutions, and always comes up trumps here. Will always be my first port of call from now on. Many thanks for the tutorials. Such valuable info and helping make my business a big success!!!
@steppahouse
@steppahouse 4 жыл бұрын
Loved the tutorial and got it to work...mostly. My problem now is that when I want to work on pages in Elementor, a "EDIT HEADER" box drops down any time I try manipulate the first (top) section on any given page. Any ideas for a workaround or did I miss something?
@richardc8129
@richardc8129 4 жыл бұрын
I know it would be a monumental task, but would be helpful if you could replace your lessons using the current version of Elementor. Just a thought. (There must be a way of setting-up a system by which this could be done efficiently with major version releases.....) Thanks.
@ecobe.digital
@ecobe.digital 4 жыл бұрын
GRACIAS!!! ME ESTABA VOLVIENDO LOCO!!!
@RowlandAgacheta
@RowlandAgacheta Жыл бұрын
The son may just be carrying out his dad's instructions that year
@inastridde4213
@inastridde4213 4 жыл бұрын
Thanks so much - it worked out perfectly when I first used it. However - when I opt for the negative margin, the whole section disappears... any ideas on how I can fix this?
@Erg-tk2ln
@Erg-tk2ln 4 жыл бұрын
check the z-index, put 1 on the navbar and 0 on the section with negative margin
@tekahacks7924
@tekahacks7924 5 жыл бұрын
Thanks a lot..you answered what I was looking for
@StevanOvich61
@StevanOvich61 5 жыл бұрын
Hi Paul, thanks for this tutorial. I seem to have a problem with this plugin... When activating the shrink effect the unshrunk menu disappears when scrolling back the top of the page. By unselecting the shrink effect, the unshrunk (original menu) reappears? Have tried various settings including the 'Z' index of the menu (thinking that the plugin was forcing the menu below page content). Having viewed the plugin details, it states that it hasn't been tested with my current version of elementor. I suppose this could be the problem? Note: I am using the Hello theme and no other plugins apart from Elementor and Elementor Pro...
@WPTuts
@WPTuts 5 жыл бұрын
Apparently it's due to the negative margin that I set in the tutorial. Remove that and it should work perfectly. :)
@StevanOvich61
@StevanOvich61 5 жыл бұрын
@@WPTuts Thanks Paul. Did read the bit on the description and mention padding of the header section, which I reset. Will take off negative margin. If I do use the shrink effect I will try to adjust margin on pages section. Thanks again Paul, keep up the great work!
@DaleDonnolly
@DaleDonnolly 4 жыл бұрын
Hey Paul, I have implemented this thank you very much for your insightful WPTuts. I am wondering if/how to only show the sticky header when scrolling back up the page as in howtogeek.com that uses this method of displaying the header only when required i.e. user starts scrolling back up the page to get to the menu.
@hasanulkabirsawmik5298
@hasanulkabirsawmik5298 4 жыл бұрын
Thanks. Helpfull video
@cjw6659
@cjw6659 3 жыл бұрын
really good. Thanks for doing this.
@MarceloMarconcini
@MarceloMarconcini 5 жыл бұрын
Tks so much for the tips Wp Tuts!!!!
@jelleloosman7275
@jelleloosman7275 4 жыл бұрын
But how to make the header/menu fixed? So that it stays on top while you scroll. That's the reason downloading your plugin. But I can't see it's working.
@WPTuts
@WPTuts 4 жыл бұрын
Downloading MY plugin? Not sure what you mean, but I don't have any plugins to download!🤷🏻‍♂️
@CarlosGarcia-nn3op
@CarlosGarcia-nn3op 4 жыл бұрын
great video, thanks, everything works fine, desktop and tablet, but mobile is not transparent (sticky on all displays)
@mohammadkhalaf6997
@mohammadkhalaf6997 4 жыл бұрын
Hello WPtuts, This video has been really helpful for me but, I have a question and I hope you can help me out. what if I am using dynamic colors for the header so the text on some pages is white and on other's is black, how can I make the transition from black back to white when it's scrolling also, I have the same problem with my logo since I have 2 version's of the logo black and white. I hope you can help me out, thanks in advance for the awesome video and keep the good going.
@mjd1971
@mjd1971 4 жыл бұрын
Everything went great until the end. I find when using shrink, the entire navigation disappears when I scroll back up. What did I do wrong?
@yogiselevate
@yogiselevate 5 жыл бұрын
Thanks, man! Very useful. Before this I applied custom CSS to make my header transparent, however, this plugin does everything I want.
@WPTuts
@WPTuts 5 жыл бұрын
It certainly does. Sure, you can do it with your own CSS, etc., but not everyone wants to or is comfortable doing it manually. :0)
@yogiselevate
@yogiselevate 5 жыл бұрын
@@WPTuts Exactly. This has saved me so much time.
@inspector-tech
@inspector-tech 4 жыл бұрын
Would you be able to share how to do this using CSS? I'm using this plugin but finding a free problems with it. Thanks
@marse_17
@marse_17 4 жыл бұрын
Hi, I found very good the tutorial, but there's something that's missing for me. If I set the home page template to Elementor Canvas, the header doesn't show, any help?
@Zyrothy
@Zyrothy 4 жыл бұрын
you have to set the header condition to entire site when saving the custom header
@romyfactory8009
@romyfactory8009 4 жыл бұрын
me too I don't know why
@AndyDOHD1
@AndyDOHD1 5 жыл бұрын
Another brilliant and informative tutorial. Thanks Paul.
@WPTuts
@WPTuts 5 жыл бұрын
No problem Andy. :0)
@jaybillups2063
@jaybillups2063 3 жыл бұрын
Thank you. To the point and very helpful
@greggbell
@greggbell 4 жыл бұрын
Great tutorial but now I can't edit any pages because the content section comes up in the "Edit Header" area and I can't turn off the the sticky part. Maybe I did something wrong, I am a newbie! The only thing I can think of is to reduce the top margin so it doesn't interfere with all my pages ability to edit. I really would like to have this but right now Im stuck waiting until I finish all my pages and then I fear I will not be able to turn it off sticky and be rebuilding my header in the future. Help please.
@JeffDietzphoto
@JeffDietzphoto 2 жыл бұрын
It would be nice if these videos were up to date as none of this stuff exists any more
@DouglasMcArthurSilva
@DouglasMcArthurSilva 5 жыл бұрын
Thanks so much man! that's exactly what I was looking for
@richardc8129
@richardc8129 4 жыл бұрын
I'm finding this seems to work better on headers which have less height, say 50 - 60 pixels or less. If larger, it still seems to take up quite a bit of the screen above the fold. Therefore, I'm thinking having two headers: One for the home page (shorter), and one for the majority of pages, maybe a bit taller. Thoughts?
@djdiablox
@djdiablox 4 жыл бұрын
Hi Mate, Thank you ever so much for sooo many useful videos. I've been learning and selling Elementor based websites for quite a while now thanks to your excellent tutorials, so cheers for that. Just wanted to give you a heads up on this plugin - I know that the intent is for this to be used by users with no programming experience, however the plugin is jittery - it flickers even with high precision configs (exact pixels, using inspector etc etc) and can be so frustrating to test out. The alternative that Elementor actually have on their website for shrinking and alternative manual methods include only 20 lines of CSS which can be implemented within the elementor container and are more clean and you get a 1 step animation, rather than a 2 step (menu shrinks then logo shrinks - disturbing to the fluidity of animations and all). Furthermore, you can control the animation speed. Anyway - I hope you found this useful and thank you again for being a mentor to us aspiring web developers. Cheers!
@jfrancese8859
@jfrancese8859 4 жыл бұрын
Very good explanation and delivery, I don't feel as though i have wasted 49$
@creadigma360
@creadigma360 4 жыл бұрын
Great! what about different logo (color) for when sticky header?
@Ludvio
@Ludvio 4 жыл бұрын
hey,how do you handle the margin effect swallowing the other woocommerce pages?
@isoflight667
@isoflight667 3 жыл бұрын
Hi, im doing exactly as in the video, but my logo and other icons start to disappear. I was wondering if you know why an dhow i could fix that ?
@Nadworks-cb
@Nadworks-cb 3 жыл бұрын
Set the negative margin to the bottom, not top. Then it works. I have no idea how Paul got this to work by changing the top margin to -95. Thet will always result in the element leaving the view port.
@iDATUS
@iDATUS 5 жыл бұрын
Likes this one.
@StefanFahlberg
@StefanFahlberg 5 жыл бұрын
It works great until I add the shrink ... I reload and the header looks fine but when I scroll down it disappears for a while and then comes back and then it shrinks ... When I scroll back to the top the header disappears totally ... When I remove shrink it again works fine ...Strange ... any idea why?
@WPTuts
@WPTuts 5 жыл бұрын
Hmm, that is odd. Have you tested it in alternative browsers to see if it is browser specific?
@WPTuts
@WPTuts 5 жыл бұрын
I've sent the developer an email, so will hopefully hear back from him and see if there is a solution to this issue. :0)
@StefanFahlberg
@StefanFahlberg 5 жыл бұрын
@@WPTuts I am using Google Chrome and now I tested on MS Edge ... Same problem ... U can see the problem here (link removed) ... Any idea?
@StefanFahlberg
@StefanFahlberg 5 жыл бұрын
@@WPTuts Thanks, meanwhile I put my site on maintenance mode again and continue building on it using the plugin without shrink thing until problem solved, hopefully ... and I'll remove link to my site. Please keep me updated here how it turns out and/or you get a reply from developer :-)
@WPTuts
@WPTuts 5 жыл бұрын
@@StefanFahlberg certainly will do. Hopefully they'll come back to me and get the issue resolved.
@shermanvision
@shermanvision 4 жыл бұрын
Awesome video. I have a two row header and only the lower row is sticky. Do you think it would make sense to apply the negative margin to the body templates?
@willtubestilo
@willtubestilo 4 жыл бұрын
¡Genial, muuuuchhhhaaaaasss gracias por compartir! Funcionó perfecto 😊
@jessedameron7985
@jessedameron7985 2 жыл бұрын
This is amazing. The only part I don't understand is how it worked when you set a negative margin. When I did that, my header disappeared. However, I used the same idea and applied it to the content underneath the header, which pulled that content up. So, this still got me the result I really needed!
@rifat_newaz1998
@rifat_newaz1998 4 жыл бұрын
Thank you so much
@davidrobertsnz
@davidrobertsnz 4 жыл бұрын
Thanks for the tutorial, how do you know how many pixels to make the negative margin?
@KimMcKee
@KimMcKee 4 жыл бұрын
Hi Paul, Thanks for your awesome videos! I watch them all and am considering using the hello theme and elementor pro to build out headers and footers etc. Do you know if it is possible to create a similar effect with custom headers where the logo and bar shrinks on scroll like a lot of the Oceanwp themes have eg: surfing.oceanwp.org/ Look forward to hearing from you. TIA!
@FLportfolio
@FLportfolio 5 жыл бұрын
Hi! Great Tutorial. I use HELLO Theme and never notice that option in Sticky Header, it is new?
@WPTuts
@WPTuts 5 жыл бұрын
No, sticky has been there for a while I believe.
@FLportfolio
@FLportfolio 5 жыл бұрын
@@WPTutsWPTuts the sticky option I know, but the extra options about transparençu, etc.. I really don't notice yet. Thanks
@FLportfolio
@FLportfolio 5 жыл бұрын
Sorry man! I've just past the plugin installation! Now all makes sense :) Great Tut!
@SK-el7yx
@SK-el7yx 3 жыл бұрын
For some odd reason, when I press publish and add conditions, I don't see a 'save and close' option. What is happening here?
@SK-el7yx
@SK-el7yx 3 жыл бұрын
Never mind, I figured it out. Thanks for a great tutorial
@BrendanNagle
@BrendanNagle 5 жыл бұрын
This makes perfect sense, but things are behaving strangely. On the Homepage, all of the header's page links (Home / Contact / etc...) are showing up at approx. 1pt font... no exaggeration... I only know they are still there because of the underline effect on each when little 2-pixel lines areas are scrolled over. Oddly, this tiny-text condition used to plague my footer, while the header was fine, but for some reason their situations have now swapped (the footer text is exactly as designed). Unsure what actually triggered this change, but I have been tinkering a lot with the theme customization recently, it may have been the theme change to Hello. Furthermore, this only ever applies to the homepage, while both H+F have always looked correct on other pages (besides the additional note below, which is site-wide). I believe this is consistent for both standalone pages and subpages (with Home as parent page). The plugin for shrinking is also a great easy tip, so thank you for that too... and it works when I scroll down, but then once I scroll back up to the top of any page, the menu resizes to normal and scoots itself up even further, approx. the -95 amount as described in the tutorial. If the browser is wide enough, I can still see the very bottom of the logo (it begins as full height of the header), but no visible/clickable page links. If the browser is thinner, I don't even see that. However, if I resize the browser at this point, even just a sliver, then the header re-prompts to the intended size (albeit still with the tiny text as mentioned above). This happens in both Safari & Chrome and I am only working for the desktop build at this time. For what it's worth, when the page is still loading, the header is pre-scooted this high up and only lands in the correct place (the normal "top") once the page is loaded. This is just a half second glitch, but still blatantly apparent. Lastly, and I'm not sure how it relates, but I'm sure it does... the -95 is having no affect whatsoever on the Homepage placement/position, so the first section of content appears to start at the same place with either a -95 or 0 top margined header. My top section has a large background image and Title overtop, appearing exactly the same in both settings (-95 / 0). Do either of these predicaments sound familiar? I am using HelloTheme / Elementor Pro 2.6 and am looking to install HelloChild soon, based on some other tips. If you made it this far... THANK YOU!!!
@WPTuts
@WPTuts 5 жыл бұрын
Wow! That's a seriously long comment.. lol The shrinking font issue sounds odd and possibly a conflict with either another setting or a plugin. I would strip out any unnecessary plugins and re-test to see if the issue is still evident. I'd also open up the browser debugger to see if there are any errors and highlight the header section to see what CSS is being applied to rule out issues there. The header issue was to do with the negative margin. If I remember correctly, if you remove that it works as expected. But if you're not seeing that, I would suggest trying the above fault finding to see if you can correct the first issue and then move on and see if it is still evident as they could possibly be linked. I don't always get notifications of comments on the videos, so you may find it easier to get help / replies on our Facebook group: facebook.com/groups/wpcrue/
@LPH2004
@LPH2004 5 жыл бұрын
Toooooooo much plugins... Elementor should be more than enough!!!
@GetMeCoding
@GetMeCoding 4 жыл бұрын
Excellent tutorial. Great pace of explaining (and not over explaining)!
How to create a Blurry Transparent Sticky Header in Elementor
13:06
Rino de Boer
Рет қаралды 117 М.
规则,在门里生存,出来~死亡
00:33
落魄的王子
Рет қаралды 25 МЛН
Win This Dodgeball Game or DIE…
00:36
Alan Chikin Chow
Рет қаралды 38 МЛН
А ВЫ ЛЮБИТЕ ШКОЛУ?? #shorts
00:20
Паша Осадчий
Рет қаралды 9 МЛН
[FREE] How to Create Transparent Sticky Header in WordPress with Elementor
18:57
Elementor Review 2024: Does It Live Up to the Hype?
7:26
Consumer Research Studios
Рет қаралды 2,5 М.
Astra vs Hello - Which one is the best to work with Elementor?
4:39
Wordpress Stuff
Рет қаралды 9 М.
Elementor Sticky Headers: Hide Header on Scroll Down, Show On Scroll Up
12:11
Do's & Don'ts: Absolute & Fixed Position in Elementor
9:17
Elementor
Рет қаралды 63 М.
How to create a Transparent Sticky Header in WordPress with Elementor
10:13
I found a much better way to use Elementor's dynamic color feature
14:16
规则,在门里生存,出来~死亡
00:33
落魄的王子
Рет қаралды 25 МЛН