Professional Website Creation – Hybrid Menu With Elementor Pro

Professional Website Creation - Hybrid Menu With Elementor Pro

Professional Website Creation – Hybrid Menu With Elementor Pro

Professional Website Creation is all about simplicity. But also about the little details. Today you’ll learn how to re-create a beautiful modern and hybrid navigation and hero video section from a Site Of The Day nominee!

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!).

Professional Website Creation … For the menu?

Professional Website Creation is more than just using a theme builder and get on with the default options and styling. It takes work, creativity and dedication.

As I’ve already covered in previous posts and videos, a good way to upgrade your web design skills is to look at the best of the industry and learn from them.

And that’s precisely what we’ll be doing today. Just like for the last tutorial / mini-course, I went to the Awwwards website and had a look at a beautiful website navigation showcase and decided to re-create it with Elementor Pro.

While a lot of complex project do not use page / theme builders and prefer coding from scratch or using frameworks, Professional Website Creation can totally be achieved with theme builders like Elementor Pro. And in many cases, it will actually help you cut down development time and budget.

Professional Website Creation: slowly but surely

Sure, professional website creation is more than just learning how to create a fancy navigation and video background hero section.

But everyone has to start somewhere and the navigation is definitely one essential piece of the web design puzzle. Especially with the responsive challenges to be faced.

And the beauty of web design is that the learning never stops. What works today may not work tomorrow. So it’s a constant never-ending process.

Professional Website Creation: the tutorial

A written version would feel like a never ending story, and as you may imagine, it is more suited to the video format. So you will find the video tutorial / mini-course at the top of this page.

But here is a quick reference, just in case:

  • What you need to follow along: 03’52
  • 1 – Create the main menu: 05’58
  • 2 – Create the fullscreen popup: 06’22
  • 3 – Create the header & responsive display: 14’16
  • 4 – Setup the homepage: 28’28

The CSS

@media only screen and (max-width: 450px) {
	    #my-navicon .elementor-icon-box-title {
            display:none!important;
    }	
}

Professional Website Creation: The Tools For The Job

If you are interested in purchasing Elementor Pro, here is a handy link:

Professional Website Creation: Your Turn

Professional Website Creation - Hybrid Menu With Elementor Pro

So, I hope you now feel confident as to re-create this minimalist and classy modern hybrid navigation for your next WordPress / Elementor project!

If there are other WordPress and Elementor reviews you’d like me to cover, 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 channel.

And if you know someone that could benefit from it, please share it now.Because let’s face it… There are so many things to do in a day that if you don’t do it now you’ll probably forget.

Now if you want to brand, market and grow your business it in the Digital Age make sure you subscribe to my email newsletter so that you never miss your share of digital alchemy.

As well as tips, tools, services and case studies that can help you grow your business online.

So, that’s it for this episode! 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

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
Share on print
Share on email
>

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.

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

Free branding guidelines template! Download your free copy!

Brand, market

& grow online

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

close
Scroll to Top

Featured

Check out my favorite resources:

Subscribe to my newsletter

Menu