Professional Website Creation – pro menu

Professional Website Creation

Professional Website Creation – pro menu

Professional Website Creation has reached a new dimension with theme builders such as Elementor.

So today I’ll teach you how to re-create the beautiful modern hybrid navigation and hero 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?

If you go to any search engine and type “Professional Website Creation” you will find a ton of free tutorials and that’s great, because knowledge is now open to anyone with an internet connexion.

That being said, many of these tutorials will teach you the basics, but do they really show you how to create a professional website?

So the first question to ask is: what is Professional Website Creation? Or put simply, what makes a website professional?

Well, we could say that a professional website is a website a company would pay for.

But then again, with Professional Website Creation being offered for 5$ on Fiverr, that is very far from the truth.

We could also say that Professional Website Creation means that the final website is nice and well done.

But then again, beauty is in the eye of the beholder, isn’t it? I’ve seen beautiful websites, but slow, not optimized, etc.

So while this is not the ultimate definition, in my opinion, a professional website can be defined as following:

  • a professional website meets high standards technically (code / optimisation / security), visually (design & experience), and commercially (when relevant: conversion / marketing)

Professional Website Creation: how to upgrade your skills

One of the best ways to upgrade your skills in terms of professional website creation, is to look at the best and try and replicate to practice.

In due time, you may be a trend setter, but at the begining, you need to learn to walk.

Notice that I mentioned “try and replicate … to practice“. We’re not talking about stealing one’s design.

We’re talking practicing, about getting inspired, about understanding the process and knowing the tools you have at hand.

Whether you want to hand code, use a framework, or, in our case WordPress and plugins, the important point is to deep dive into the process.

Professional Website Creation: the mini-course

It would take literally days to write down all of this courses, and as you may imagine, it is more suited to the video format. This is why you’ll find the mini-course / tutorial video at the top of this page.

But here is a quick reference:

  1. Settings things up (WordPress / Astra Pro / Elementor): 04’20
  2. Creating the home page and adapting for responsive: 20’49
  3. Creating the navigation: 58’09


Here is the Css code to follow along:

Rotation of text at 34:57′

selector {transform: rotate(-270deg);}

The whole custom CSS at 45:36′

/* IMPORTANT: don't forget to change the offcanvas trigger ID in the following code (check Google inspector for new ID) */

/* === MEDIA QUERIES === */

	/* MOBILE */

	@media only screen and (max-width: 450px) {
		body {
			margin: 0 10px !important;

		div#slidebar-trigger_a6b0037 {
			position: fixed;
			right: 10px !important;
			top: 0;

		.ee-offcanvas__header__close {
			margin-right: 0px !important;

		.ast-button-wrap .menu-toggle .menu-toggle-icon {
			display: none;

		.main-header-bar, .ast-header-break-point .main-header-bar, .ast-header-break-point .header-main-layout-2 .main-header-bar {
			padding-top: 0;

	/* TABLET */

	@media only screen and (min-width: 451px) and (max-width: 1024px) {
		body {
			margin: 0 40px !important;

		div#slidebar-trigger_a6b0037 {
			position: fixed;
			right: 40px !important;
			top: 0;

		.ee-offcanvas__header__close {
			margin-right: 40px!important;

		.main-header-bar, .ast-header-break-point .main-header-bar, .ast-header-break-point .header-main-layout-2 .main-header-bar {
			padding-top: 0;

/* === END OF MEDIA QUERIES === */

body {
    margin: 0 80px;

.ast-site-identity {
    padding: 0 !important;

.ast-header-widget-area .widget:last-child {
    margin: 0 !important;

.site-header .menu-text:hover {
    border-bottom: 2px solid #ffffff;

div#slidebar-trigger_a6b0037 {
    position: fixed;
    right: 80px;
    top: 0;

.ee-offcanvas__header__close {
    margin-right: 80px;

Professional Website Creation: The Tools For The Job

If you are interested in purchasing Elementor Pro, Elementor Extras or Astra Pro, here are some handy links:


Professional Website Creation: Your Turn

So, I hope you now feel confident as to create a beautiful modern hybrid navigation for your next project 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
  • Alan Mills Alan Mills says:

    Thank you so much for this tutorial

  • >
    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.

    Scroll to Top

    My Account


    Check out the shop!

    Subscribe to my newsletter