Awwwards Winner Tutorial With Elementor Pro

KCN27-04-bg-img-00-B

Awwwards Winner Tutorial With Elementor Pro

How To Create A Transparent Header Menu In WordPress With Elementor Pro? Well that’s precisely what we’ll be going through today.

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).
  • 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 channelIt 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!

Share this post

>
Privacy Settings saved!
Privacy Settings

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. Control your personal Cookie Services here.

Cookies essentials to the navigation on this website.

Cookies used to remember your choices regarding privacy.

Decline all Services
Accept all Services

Join me on YouTube

subscribe & get exclusive tips to be your own boss

Brand, market

& grow online

​By subscribing you accept to receive my newsletter and occasional marketing offers. Unsubscribe anytime.

close
Scroll to Top

My Account

Featured

Check out the shop!

Subscribe to my newsletter