How to create a Transparent Header Menu in Wordpress with Elementor Pro

Тәжірибелік нұсқаулар және стиль

In this tutorial, you shall learn one of the huge trends in web design right now, which is how to create a transparent header. In this video, I shall demonstrate how you can create a transparent header menu in WordPress with Elementor Pro from scratch.
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it.

Пікірлер: 559

  • @andromeda1903
    @andromeda19033 жыл бұрын

    seriously, you are the best wp/elementor instructor here on YT! i lost a whole year trying to build a blog but after i found your channel i was able to make my own theme in a few weeks. it's still not done but it's already looking amazing! thank you so so much!!!

  • @rinodeboer

    @rinodeboer

    3 жыл бұрын

    Great to hear!

  • @robindegroot5629
    @robindegroot56293 жыл бұрын

    Just 50 secondes into this video, and I already know it's gonne be good. Thanks for the content man and keep it up!

  • @theenchanted3069
    @theenchanted30694 жыл бұрын

    Have been searching for this solution for half day. Thank you!!

  • @LordJHouse
    @LordJHouse Жыл бұрын

    3 years later and this video is still applicable. I followed another video on the same subject a few days ago, but it suggested adding a negative margin to the hero section, not the header. While this works, I found that I would have to apply a negative margin to every page if I took this route, instead of just adding it to the header (once) per your recommendation. Thanks for the tip, I will apply this tip moving forward.

  • @brandon5614
    @brandon56143 жыл бұрын

    Glad I found this channel. Just bought Elementor Pro for my Cybersecurity/IT Journey.

  • @jennyfuchs666
    @jennyfuchs6663 жыл бұрын

    would love to see that the background color changes when you scroll down

  • @namubakclothing3007

    @namubakclothing3007

    2 жыл бұрын

    yes please

  • @marekgabik2898
    @marekgabik28983 жыл бұрын

    Oh man, thank you. You teach me how to make transparent menu but you explain to me a lot of another detail things, which help me too.

  • @moonbeetle
    @moonbeetle2 жыл бұрын

    Very nice tutorial that shows that you can creat all this without additional plugins or a special theme. Just one question, as soon as you start scrolling, you will want to header to get some background color for legibility. Would be cool if there was a follow-up video on that.

  • @bamideleoyekanmi9958
    @bamideleoyekanmi99583 жыл бұрын

    One of the best (maybe the best) tutorial I've seen. Well done!

  • @ezk10003
    @ezk100033 жыл бұрын

    You the man! Haha, I bought your course, really busy at the moment, but looking forward to getting started soon!

  • @muhatasimshad8653
    @muhatasimshad86534 жыл бұрын

    I was facing the heading problem for a couple of week. I couldn't join on fiverr for this. I've searched for this solution in so many websites and videos. But all of them shows some Bullshit css coding and that is so awful. But Here you gave the best solution of ever. No coding,No Css. just a simple trick. You're amazing man. God bless you and keep it up.

  • @rinodeboer

    @rinodeboer

    4 жыл бұрын

    Awesome to hear, thank you!

  • @charley3849
    @charley38494 жыл бұрын

    Just purchased Elementor Pro, feeling very glad now as I watched this helpful video, thanks!

  • @rinodeboer

    @rinodeboer

    4 жыл бұрын

    Great to hear!

  • @brunobogdan7822
    @brunobogdan78223 жыл бұрын

    I have been going around for hours searching for a solution (also tried to exclude the main menu from some pages but my elementor bugged and that option is not working) I cannot thank you enough for this video, man!

  • @robsonvieira1080
    @robsonvieira10808 ай бұрын

    One of the best tutorials on the internet. Thank you

  • @twbashar
    @twbashar4 жыл бұрын

    Nice one rino. We always wait for your video.

  • @shiranjude
    @shiranjude3 жыл бұрын

    super video. you were singing from start to finish and we all danced. everything is clear and easy to understand.

  • @Haroldus26
    @Haroldus263 жыл бұрын

    Thanks a lot for this video. It's explained incredibly simple way and without unnecessary details.

  • @cynthiamanor6565
    @cynthiamanor65652 жыл бұрын

    Thanks so much for sharing this tutorial! I wish I had watched it before trying to make a transparent header on my own. I recently got Elementor Pro, and your channel has REALLY been helpful to me. Keep up the AWESOME work!!

  • @skiller1081
    @skiller10814 жыл бұрын

    Been your subscriber for long. Learnt alot from your videos. thanks

  • @craigcastle4605
    @craigcastle46052 жыл бұрын

    Rino, as always you're the best! Keep these videos coming. Thank you.

  • @lethalsin
    @lethalsin3 жыл бұрын

    For those who don't use a specific height for the header just put an html element inside the page you want the transparent effect to take place and give the header a negative margin using its offsetHeight property with javascript!

  • @DKingFisher
    @DKingFisher4 жыл бұрын

    Clean smooth video. Thank you bro. Really helpful. Calmness 100

  • 2 жыл бұрын

    I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!

  • @LobsangRivas
    @LobsangRivas3 жыл бұрын

    Thank you for the amazing content. Hope your channel grows bigger.

  • @brentex1854
    @brentex18544 жыл бұрын

    such great content! simply amazing!

  • @kierantelos
    @kierantelos4 жыл бұрын

    Subscribed, liked and downloaded Elementor Pro via your link. Really appreicate the clean delivery of information!

  • @rinodeboer

    @rinodeboer

    4 жыл бұрын

    Thank you so much 🙏🏻

  • @ambrishsudhanandan7098
    @ambrishsudhanandan70982 жыл бұрын

    the bottom -90 margin thing was what i was looking for ! TY so much !

  • @ymegananda
    @ymegananda4 жыл бұрын

    thanks a lot for the video, have been looking for this effect. easy to follow. God bless you!

  • @duygster
    @duygster2 жыл бұрын

    Hi Rino, I created my first website with your support. Thank you for all your content - it's very impressive. Can you please tell me what font and font size you use for your header? I'm wondering if 14 as font size is a little too much (that's what I use).

  • @awakekat
    @awakekat4 жыл бұрын

    I was kind enough to google your spelling of transparant thinking you misspelled it, but not so. You are using the Dutch spelling. I learned something today. Rock on, great video!!

  • @rinodeboer

    @rinodeboer

    4 жыл бұрын

    Thank you. My intention was to use the English spelling, so I changed it. Thanks again!

  • @kevinveg
    @kevinveg Жыл бұрын

    I searched for ages to find out how to do this, so thanks very much.

  • @vyogesh8344
    @vyogesh83444 жыл бұрын

    Loved the tutorial. Good Job

  • @cleml3b
    @cleml3b3 жыл бұрын

    Thanks for this clear tutorial, I made everything and it works in the page builder, however on my website the result is completely different, my menu is still separated from the block below. any ideas ?

  • @vx-petia
    @vx-petia3 жыл бұрын

    Thank you for this cool vid! I was wondering why didn't you just vertically align: middle the whole container instead of individually at around 6:20?

  • @tsunsol
    @tsunsol2 жыл бұрын

    Rino, you are wonderful. Thank you for this nice tutorial. It helps me to improve my knowledge and my homepage.

  • @nataliesalander7840
    @nataliesalander7840 Жыл бұрын

    Fantastic tutorial! I really appreciate you sharing this information :) such a great contribution! Thank you.

  • @TamiePryor
    @TamiePryor3 жыл бұрын

    Thank you for this video, it was exactly what I was looking for! I used your information to correct the top white space problem created when I made a transparent header following someone else's video. I think I might have done something wrong, though. My home page is fixed, but it did not correct the header on the rest of my website. How can I fix this?

  • @yuliashor6298
    @yuliashor62983 жыл бұрын

    You are amazing! Thank you so much for your videos, they help me to progress with my website building.

  • @Dr.JayPrasad7
    @Dr.JayPrasad7Ай бұрын

    You are damn good man. So easy, crisp. No time waste. You nailed it man. Thank you soo much brother. keep it up

  • @LuizRicardoFotografia
    @LuizRicardoFotografia3 жыл бұрын

    Perfect!! I loved this menu style

  • @fy1000000
    @fy10000004 жыл бұрын

    Best I have seen! Thank you very much !

  • @evanparcon
    @evanparcon4 жыл бұрын

    Awesome!!!! Very thorough... ❤

  • @MayMay-gt6ld
    @MayMay-gt6ld4 жыл бұрын

    You are one of the best! Keep up the good work...Cheers!

  • @meghan4884
    @meghan48843 жыл бұрын

    Thank you for this tutorial, can you help me understand the next level to make this transparent header to be sticky and animate to a different color logo and text that shows up on a white background? Is it CSS only to make this effect?

  • @oosloobdesign7890
    @oosloobdesign78903 жыл бұрын

    Thanks for this tutorial! By the way, how did you do to put your logo under the WordPress dashboard section?

  • @felixotten8434
    @felixotten84343 жыл бұрын

    Thank you very much! This tutorial was very great and saved me a lot of time!

  • @jamiemulchrone7263
    @jamiemulchrone72633 жыл бұрын

    Great tuto and very easy. Just one question, how can i get this same effet on mobile, do you have to add/change a few things in the css for it to work ? Thanks

  • @vaibhavdwivedi
    @vaibhavdwivedi2 жыл бұрын

    That was a great tutorial, friend. Thank you!

  • @scrollsequence
    @scrollsequence3 жыл бұрын

    Nice, will use that on our site. Simply clever setup!

  • @cherndon8948
    @cherndon89484 жыл бұрын

    Thank you so much! Such a helpful video.

  • @sandrotomic9128
    @sandrotomic9128 Жыл бұрын

    Thanks mate. Helped me a lot

  • @foodcity9996
    @foodcity99962 жыл бұрын

    Thanks a whole lot, you're helping me solve a huge web project with my company

  • @levindeheer2056
    @levindeheer20564 жыл бұрын

    Heel erg bedankt Rino, het ziet er altijd zo makkelijk uit wanneer jij het doet 😉

  • @rinodeboer

    @rinodeboer

    4 жыл бұрын

    Hahah!

  • @almakisingokay
    @almakisingokay Жыл бұрын

    this is amazing now i know how to create transparent header menu in WordPress using elementor

  • @thaiscamargo5468
    @thaiscamargo54683 жыл бұрын

    Wow! Awesome tutorial! Thanks for the help :)

  • @eskerinola5845
    @eskerinola58454 жыл бұрын

    Well explained!. Thank you for sharing.

  • @MrBioneto
    @MrBioneto2 жыл бұрын

    You make a good stuff, took a lot for my websites. Thank you man!

  • @rivenlikemakar
    @rivenlikemakar2 жыл бұрын

    You're a legend thanks for making this video

  • @ramonalisa4187
    @ramonalisa41873 жыл бұрын

    Thank you sooo much. As always, your video was super helpful to me!

  • @ArnoldBaldeNL
    @ArnoldBaldeNL Жыл бұрын

    thanks man, leuk om een mede Nederlander deze tutorials te zien geven. je hebt mn site gered, dit lukt, ik ga mijn website even aanpassen. geniet van je avond!

  • @krishnaa6010
    @krishnaa60104 жыл бұрын

    Amazing quality and content thanks 👍❣️

  • @prokassim
    @prokassim3 жыл бұрын

    Thanks a lot that was an amazing tutorial, we appreciate it !!!

  • @mohammadakram599
    @mohammadakram5993 жыл бұрын

    Thank you very much, I was looking for exactly this

  • @brianbh1528
    @brianbh1528 Жыл бұрын

    Thanks you so much for the video,, You helped me alot, usually i'm not commenting but you support made me to express my feeling. Many Thank!!!!!!

  • @patrick64240
    @patrick642402 жыл бұрын

    Merci beaucoup pour votre tuto, très clair et qui fonctionne du premier coup Thank you very much for your tutorial, very clear and which works the first time

  • @DChristop
    @DChristop4 жыл бұрын

    This is awesome!!! Thanks a lot!!!

  • @biswajitnarzary5071
    @biswajitnarzary50713 жыл бұрын

    Easy to understand and very helpful. Thank you

  • @Purcella13
    @Purcella134 жыл бұрын

    Easiest way by far that I have found to get what you want.

  • @Oxide451
    @Oxide4513 жыл бұрын

    This is a great tutorial. Thank you so much!

  • @studiogendt3871
    @studiogendt38714 жыл бұрын

    Yess, so easy. Thanks for sharing!

  • @aliyahcouture5235
    @aliyahcouture52352 жыл бұрын

    Great video!! U're the best!

  • @danburdie
    @danburdie3 жыл бұрын

    I was looking for that kind of tutorial for a very very long time so I kinda figured it out myself but using free plugins. It was not that easy and as much customizable but it did the job well. However this tutorial is awesome and definitelly will use that for myy customers websites.

  • @darrylhanstein1884
    @darrylhanstein18842 жыл бұрын

    Amazing! Do you recommend using the elementor hello theme for site start? Also if I’ve been trying different themes and plugins is there a way to check and get rid of any old code left behind in Wordpress or is this deleted with the removal of plugins etc? Love your tutorials Many thanks Darryl

  • @sommyincrease
    @sommyincrease Жыл бұрын

    This video solved my confusions. Thanks for it

  • @nychto2642
    @nychto26423 жыл бұрын

    Thank you so much you really help me to know a lot of things about Elementor i wish you all the best keep going and we are waiting always for more videos

  • @benoitcastillon2776
    @benoitcastillon27764 жыл бұрын

    Really helpful tutorial. Thanks a lot

  • @mikecraft4506
    @mikecraft45063 жыл бұрын

    Seriously GOOD!

  • @mubashirali4741
    @mubashirali47413 жыл бұрын

    Thanks for guiding us this video is very helpful for me

  • @wongcg
    @wongcg4 жыл бұрын

    Hi thanks once again. Can I ask how do you insert the video and have it overlay with the header? I understand it as you insert a video first, but how do you add a header on top of the video?

  • @saidsoultani8831
    @saidsoultani8831 Жыл бұрын

    Oh man, thank you so much ,Thank you for this video

  • @gautambedi591
    @gautambedi591 Жыл бұрын

    Very nice mate!

  • @OnlineTrainingPoint
    @OnlineTrainingPoint4 жыл бұрын

    WoW..... Very nice tutorial. Thank You.

  • @ChristianCorom
    @ChristianCorom4 жыл бұрын

    Helpful video. Thank you.

  • @sabrinaafrinsimi6964
    @sabrinaafrinsimi6964 Жыл бұрын

    That was so helpful. thanks

  • @asifkhawaja
    @asifkhawaja2 жыл бұрын

    Great video. In there a way to show the menu as transparet on some pages and not transparent on others?

  • @DrKarenHoving
    @DrKarenHoving4 жыл бұрын

    Thanks this looks great!

  • @gabrielrodrigomarquesduglo9130
    @gabrielrodrigomarquesduglo91303 жыл бұрын

    Thank you from Brazil. You helped me a lot. ✌️

  • @Vivazart
    @Vivazart2 жыл бұрын

    hEY BUDY, ITS AMAZING! GREAT WORK! HI FROM BRAZIL

  • @lauregarelvoyages1406
    @lauregarelvoyages14063 жыл бұрын

    Trankil you for your advice. You add joy on my day 🙂

  • @lilreep
    @lilreep3 жыл бұрын

    Wow your tutorials are just amazing!

  • @rinodeboer

    @rinodeboer

    3 жыл бұрын

    Thank you

  • @jasonpolonski-realtorinkan8447
    @jasonpolonski-realtorinkan84474 жыл бұрын

    Great Video!!! Thank you so much!

  • @YaShortsBoi
    @YaShortsBoi3 жыл бұрын

    Very nice video! Thanks man, only issue I have is right at the end the menu items aren't aligned to the button. Yours is the exact same, can you help me ammend this, not sure why it happened right at the end. I'm guessing it's something to do with the extra menu for mobile?

  • @desiraehenderson8345
    @desiraehenderson8345 Жыл бұрын

    Amazing! Thank you

  • @bareeraamjad396
    @bareeraamjad3963 жыл бұрын

    Amazing video. I learned a lot from it. Thank you.

  • @SunilSindhey
    @SunilSindhey7 ай бұрын

    Thanks for this wonderful video

  • @sannicsan
    @sannicsan Жыл бұрын

    Gracias Capo, un excelente tutorial.

  • @nastja3294
    @nastja32942 жыл бұрын

    This helped me so much!!! Thank you 🙏🏼🤍

  • @Jay_Jilly
    @Jay_Jilly3 жыл бұрын

    When i make changes to my header regarding widget sizes and location, it affects it on the desktop version as well - How can i fix this?

  • 4 жыл бұрын

    Thank you Rino, good job :)

  • @Dexquest3d
    @Dexquest3d3 жыл бұрын

    Oh wow wow wow wow wow. I love this. Thank you so so much

Келесі