How To Create A Transparent Header Menu In WordPress With Elementor Pro? Well that’s precisely what we’ll be going through today.
- hello, I’m your host Kaycinho, I’m the Digital Alchemist, and today I want to show you how limitless you are with Elementor Pro.
So I wanted to show you a real life example, and what best for such a tutorial than re-creating an Awwwards Site Of The Day winner?
Awwwards Winner Tutorial Timestamps
This tutorial is video based of course, but in case you need some time stamps :
- 2:41 – Step 1 – Pre-requisites
- 4:26 – Step 2 – Building the home page
- 27:33 – Step 3 – Building the fullscreen nav
- 45:21 – Step 4 – Creating the header
Awwwards Winner Tutorial Css Code
Code for the home page
@media screen and (max-width: 767px) { .my-main { height:45vh!important; } .my-secondary { min-height:13vh; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .my-main { height:50vh!important; } .my-secondary { height:25vh; } } @media screen and (min-width: 1025px) { .my-secondary { height:50vh; } }
Code for the Fullscreen Navigation Popup
.elementor-nav-menu li { display: block; float: right!important; clear: both!important; } @media only screen and (min-width: 0px) and (max-width: 767px) { a.menu-link.elementor-item.elementor-item-active::after { content: '__'; background: rgba(0,0,0,0.0)!important; position:absolute; right:-5px; top:5px; } } @media only screen and (min-width: 768px) and (max-width: 1023px) { a.menu-link.elementor-item.elementor-item-active::after { content: '_____'; background: rgba(0,0,0,0.0)!important; position:absolute; right:-15px; top:5px; } } @media only screen and (min-width: 1024px) { a.menu-link.elementor-item.elementor-item-active::after { content: '_____'; background: rgba(0,0,0,0.0)!important; position:absolute; left:130%; top:7px; } }
Awwwards Winner Tutorial: Your turn!
So, I hope that you enjoyed this tutorial and I can’t wait to see what you’re going to come up with!
Question of the day: do you prefer standard or fullscreen navigation? Please let me know in the comments!
If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you a thing!
Also, if you know someone that could benefit from it, please share it now.
Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.
So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!