How to Create a Sticky Header in Elementor

The header and footer are one of the most important parts of a website. Your website’s header is the first thing a visitor notices while landing on your site. A header refers to the navigation bar that displays the business logo, links to all important pages, any CTA, and a way of contacting you via a phone number or email address.

A well-structured header is crucial for your website and can be used to advertise any messages or promotions. It creates easiness for potential customers to explore the website. A good header functions like a good salesman; for example, using the call to action of 20% off for only today will urge the users to buy your product.

A header can be of particular types, such as a sticky or fixed. A sticky header is also known as a fixed header. It is a smart navigation tool that fixes the main menu at the top of the page as visitor scrolls down.

Importance of Sticky Header

A sticky header is a fixed header that allows users to quickly access the search and all important pages without going to the top of the page. According to a study, 22% of internet users said that websites with sticky headers are easier to navigate. Another study found that using a sticky header on an e-commerce website increased conversions by 3%.

Creating a sticky header in Elementor is not simple, especially if you are creating a website for the first time. So, we have created a step-by-step guide to help you design a sticky header with Elementor without writing a single line of code.

Let’s get started!

1. How to Create Sticky Headers using Elementor Pro

A sticky header is a very efficient way to create convenience for your website users. Let’s see how we can quickly design a sticky header using the Elementor theme builder that comes as a premium feature in Elementor Pro.

Step 1: Create a Main Menu

Create a Main Menu

Before creating the sticky header for your website, first, you need to create the Main Menu in your wp-admin > Appearance > Menus. Add all the important pages that you want to show in your header must be listed here.

Step 2: Open the Theme Builder

Open the Theme Builder

After creating the main menu, go to Elementor Templates > Theme Builder. On the theme builder page, click on the Header section and choose “Add New Header.”

Add New Header

After that, a pop-up will appear; write the name of the header template and click on “Create Template.”

Create Template

Now you will be redirected to the Elementor Editor page. On this page, you can choose any prebuilt header templates or create your own. Here, we will create a sticky header from scratch.

Before we start creating the header, it is important to highlight that Elementor offers 7+ widgets that you can utilize to create your header.

Elementor offers 7+ widgets

Step 3: Build a Header Template in Elementor

Now select the two-column structure (one column for the logo and the other for the horizontal menu).

Select content width

Then go to layout and select the boxed option in content width.

Edit Column

Choose the column width to 20% under the “Edit Column.”

Edit Column

Now, add the logo of your website to the left column and select the left alignment. Then in the right column, add the Nav Menu and choose the menu you created in step 1. Now, align the main menu to the right-hand side.

Add logo and menu

In this tutorial, we are creating a basic header. You can create a more stylish header by adding hover animation effects, background color, and buttons.

Step 4: Make Your Elementor Header Sticky

Now that you have designed a basic header, it is time to make it sticky. To make it fixed, click on the Edit section and go to Advanced > Motion Effects.

Make Your Elementor Header Sticky

Under the advanced section, select sticky to the ‘top’ from the dropdown, select the devices you want to display your sticky header on and click on publish button.

Edit Visibility

Once published, a new pop-up screen will appear asking you to ‘Add a Condition’ for your header. Setting the conditions determines where your header is used throughout your website. For example, choose “Entire Site” to display it across your site.

Sticky Header Display

That’s it, now you know how to create a sticky header in Elementor in a few steps.

Add More Style with Custom CSS

You can make your Elementor sticky header more stylish using a custom CSS class. You can add background color, height, sticky effect, and transition effects. Let’s see how we can achieve that.

Go back to the “Edit section” and go to Advanced > Motion Effects.

Go to “Effects Offset” under Motion Effects and enter the value 100. It is the scrolling distance where the scrolling effect appears whenever a user lands on your website.

Effects Offset

Scroll down and open the “Custom CSS” dropdown. Paste the CSS class given below. You can also edit this CSS to design it however you like.

Paste the CSS

Custom CSS:

selector.elementor-sticky–-effects {
  background-color: rgb(255, 220, 168) !important;

selector {
  transition: background-color 3s ease !important;

selector.elementor-sticky–-effects > .elementor-container {
  min-height: 80px;

selector > .elementor-container {
  transition: min-height 1s ease !important;

2. Create a Free Sticky Header Menu using Xpro Elementor Theme Builder

You can also use the FREE Xpro Elementor Theme Builder to create a sticky header with a full creative design experience. It is a free Elementor add-on that gives you the functionality to create a sticky header using premium header templates and theme builder widgets.

Let’s see how we can create a sticky header in Elementor using this theme builder plugin.

Step 1: Install the Xpro Theme Builder Plugin

Go to your WordPress Dashboard > Plugins > Add New.

Now, search for the Xpro Elementor theme builder, click on the “Install Now” button, and “Activate” it once installed.

Xpro Elementor theme builder

After activating the plugin, you will see the “Xpro Addons” option in the sidebar of your

Step 2: Create a Sticky Header

To create the sticky go to Xpro Addons > Theme Builder > Add new.

Create a Sticky Header

Add the title of your sticky header. Select the “Header” option from the “Type of template” dropdown.

Choose “Enable” from the “Header Sticky” option and click on the “Edit with Elementor” button after saving your setting. You can also tweak other settings according to your choice.

Edit with Elementor

Now you will be redirected to the Elementor editor page. On this page, you can choose any of the modern pre-built templates or create your own. Here, we will create a sticky header from scratch.

Select the two-column structure, one for the logo and the other for the menu.

Select the menu structure

Now from the “Layout” option, set your content width to “Boxed”.

set your content width

Set the structure with a “33,66” ratio from the Structure dropdown.

Set the structure

Add your website’s “Site Logo” to the left column and select the left alignment option under the General dropdown. Then in the right column, add the Nav Menu and choose the “Main Menu.” Now, align the main menu to the right-hand side.

Add sticky menu content

Now, click on update, and your header will go live on your site.

click on update

3. Create a Sticky Header Menu with myStickymenu

myStickymenu is another WordPress plugin that can be used to create a beautiful customized header for your Elementor website. You can create a welcome bar for announcements, add a countdown for promotions, and more.

Let’s create a sticky menu with myStickymenu.

Step 1: Install the Plugin

To install the plugin, go to your WP Dashboard > Plugins > Add New.

Install the Stickymenu Plugin

Now, search for myStickymenu, click on “Install Now,” and then click on “Activate”.

Step 2: Enable Sticky Settings

Go to Settings > myStickymenu. Toggle the sticky menu button and select “Other Class or ID” from the dropdown under Sticky Class.

myStickymenu Settings

Change the other settings like opacity or background color according to your web design goals. Now, scroll down and click on the “save button”. Refresh your website to see the sticky header in action.

myStickymenu is a good plugin for creating a sticky header, but it has a drawback. You can only make a basic sticky header with it. To get more customization options, you have to upgrade your plan starting from $25 per year.

4. Create a CSS Sticky Navbar in WordPress

The last option in our blog for creating a sticky header in Elementor is using custom CSS in your WordPress theme. To create a sticky navbar using CSS, log into your WordPress dashboard and follow the steps below.

Step 1: Open the WordPress Customizer

Go to Appearance > Customize > Additional CSS.

Customizer CSS option

Step 2: Add CSS Code

Add the following CSS code.

nav {
  background: #ffff;
  height: 70px;
  z-index: 999;
  margin: 0 auto;
  border-bottom: 1px solid #dadada;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

Now you can customize your header as per your liking but this requires sound knowledge of HTML & CSS. Most of the themes offer this feature as a premium function. But, we have used the Xpro free theme as an example.

If your site offers long-form content then adding a sticky navigation header might help improve the user experience. Creating a sticky header with Elementor Pro and Xpro Elementor theme builder is quite easy as compared to other methods highlighted in this blog. The one offered by Xpro also comes with free Xpro addons. In the end, it’s your choice to opt for any method you find suitable for your Elementor website.

If you have any questions related to how you create a sticky header in Elementor then let us know in the comment section. We will happily assist you.


WordPress vs Webflow: Which is Better for Web Design?

If you’re planning on building your website you may have heard of Webflow and WordPress, two of the most popular website builders available today. But before you can begin your project, you should carefully weigh its pros and cons. Here we will compare WordPress and Webflow to figure out which one is the better solution for your website.

Before we compare WordPress and Webflow, let’s briefly go over each one.

WordPress Overview

WordPress has been operative since 2003. It is a free open-source WordPress software that has seen rapid growth since its inception. Today, it powers over 455 million websites worldwide! Originally starting as a blogging platform, it now serves as a full-service CMS software that can power any site, from business websites and eCommerce stores to blog sites and directories.

Webflow Overview


Webflow is an in-browser, no-code website design tool that is available for businesses, designers, and marketing individuals alike. This no-code website builder allows quite literally anyone to create a professional-looking website without typing down a single line of code. It was first introduced in 2012, and now powers over 100,000 websites for businesses both large and small. It can be used to design complete websites, dedicated landing pages, eCommerce sites, blog sites, and much more.

Now that you have a brief summation of what WordPress and Webflow are, we move on to comparing them both over a wide range of parameters.

WordPress vs. WebFlow Usability

WordPress and Webflow both are popular website-building tools since they don’t require any experience with coding.

Gutenberg Editor

WordPress is fairly easy to use featuring an intuitive visual editor (called Gutenberg), although you may have to deal with a learning curve at first. There are plenty of tools to get accustomed to including themes, plugins, and extensions. But once you do happen to understand them, you can easily make visually appealing website layouts. Plus if you don’t like the WordPress editor, you can instead use drag and drop page builder addons/plugins.

webflow builder

If we talk about Webflow on the other hand, you’ll find its builder dashboard to be a bit more complicated. It has plenty of features and users will need time to figure out what does what. You do get access to a lot of design and development tools, plus customization options but you’ll need time to master it all.

WordPress vs. WebFlow Features

WordPress and Webflow both offer several reliable features, some features they have in common, others they do not. Here’s a brief rundown of the main features each has to offer.


  • Themes and templates library
  • Visual drag and drop design
  • CMS
  • SEO optimization
  • SSL certificates
  • Free eCommerce integration through WooCommerce
  • Gutenberg editor/block editor
  • Categories, tags, and custom posts


  • Visual editor
  • Over 1000 themes to choose from
  • Customizable templates
  • CMS
  • SEO optimization
  • SSL certificates
  • Drag and drop design
  • Integrated eCommerce engine

WordPress vs. WebFlow Themes Themes

WordPress offers a wide number of themes for you to choose from that pertain to the design of your entire site, including the style, the colors, the graphics, the sheets, and the code. In total, WordPress offers nearly 10,000 themes for free and even more premiums are available via reputable marketplaces like Themeforest, Template Monster and more. You can download any theme of your choosing and activate them for your website.

Webflow Templates

Webflow, on the other hand, is a bit limited when it comes to themes (which they refer to as templates). They offer only 1000 responsive website templates to choose from, most of which are premium add-ons, not free. However be assured that these themes are well designed, well optimized, and versatile. You’ll easily find a theme that fits your unique business profile.

WordPress vs. WebFlow Hosting should never be confused with, both are two different solutions. While has a hosting solution in itself, will require you to separately purchase web hosting services for the website you create. Luckily there are many great WordPress hosting options to choose from, all of which offer WordPress pre-installed or a quick 5-minute setup process.

On the other hand, WebFlow offers web hosting services to its users. Since it is managed-hosting, you don’t have to worry about any tasks associated with hosting, and instead focus on creating your website. WebFlow will handle the rest. Their web hosting is powered over Amazon Web services infrastructure, meaning you can expect fast and reliable hosting services.

WordPress vs. WebFlow E-Commerce

Both WordPress and Webflow can help you set up an eCommerce website.

Opening up an eCommerce website with WordPress is incredibly easy. You simply have to install and set up the WooCommerce plugin (or any eCommerce plugin of your choice). Although most people prefer to use WooCommerce since it is free, easy to use, and reliable. WooCommerce will further offer you plenty of templates and themes to choose from, which can further be customized to your liking.

On the other hand, Webflow does not need an added plugin, the e-commerce feature is already built into the Webflow service. However, you will have to pay for their eCommerce plan to get access to these services. Webflow will also limit the number of products you can sell according to the plan you purchase. For instance, their standard Ecommerce plan comes at $42/month and allows you to sell 500 items (WordPress has no such limitations). Furthermore, Webflow lacks plenty of the core eCommerce features and supports a limited number of payment processors.

WordPress vs. WebFlow Integrations

When it comes to integrations, WordPress is the obvious winner. Simply because it supports a much wider range of integrations. For example, WordPress integrates with event and ticketing platforms, Shopify, BigCommerce, dozens of social media, email marketing, analytics, page builder, and dropshipping plugins. The latter one allows you to sell products without needing an inventory by integrating with large distributors like AliExpress or Printful. You can find plugins for quite literally any integration you can imagine. The integration itself is quite easy to achieve, giving it another boost in usability.

Comparatively, Webflow isn’t as competitive when it comes to added integrations. You won’t find the same ease of versatility WordPress has to offer. Moreover, some integrations may be pretty straightforward but others may require troubleshooting. In many cases, you may have to use code embeds or other interfaces to get required integrations.

WordPress vs. WebFlow Support

If you’re planning on building your website, you will need to connect with support a lot more than you can think. Whether you need to get guidance on added integrations or features, and how you can enable them, the support services will guide you well.

WordPress support is mostly free support from the community since it is an open source free software after all. You’ll find plenty of help with WordPress via support forums and groups where you can drop in questions for the community to answer. You’ll also find plenty of tutorials and guides online since WordPress is a pretty popular platform.

Webflow support is a lot more focused on the “Webflow University”. This is a massive library composed of detailed articles, tutorials, and guides on a wide range of topics. You can further connect with Webflow email support services or chat support. However the chat support is AI bot-driven, so we’d recommend using their email support services instead.

WordPress vs. WebFlow Pricing Pricing

For, the core software is free, and open-source, meaning anyone is open to using it without cost. However, there are some added features you may have to purchase. Web hosting services, for instance, are not free and will have to be purchased if you hope for your website to go live. Paying for your web hosting (and domain) are some extra costs you will have to put up with. You may also have to pay additional for themes or premium plugins if you like, but you’ll have a wide selection of free themes available as well. The final pricing is therefore arbitrary depending on the web hosting service you hire and the themes/plugins you purchase.

Webflow Pricing

Moving on to Webflow. The actual Webflow designer is free, meaning you can sign up and start creating your website. However, if you want to launch your website you’ll have to sign up with a paid plan. Webflow tends to offer two types of plans: site plans and workspace plans. A site plan will allow you to host your website on Webflow after designing whereas a workspace plan will allow you to host your website elsewhere after designing. The basic Site plan comes at $12/month whereas the basic Workspace plan comes at $28/month.

Which Is Better?

Now that we’ve discussed the major features both WordPress and WebFlow have to offer, we can now decide on which platform will serve you better.

In reality, there is no one real winner. Both websites have their pros and cons. The one that serves you best will depend ultimately on your unique needs.

WordPress for example, is an easy-to-use website, has a lower learning curve, and plenty of resources, themes, integrations, and plugins, and may even be cheaper than Webflow. However it is a self-hosted software, meaning you’ll have to handle maintenance, security, and updates yourself, you may also find the lack of direct customer support a bit difficult to work with.

Similarly, Webflow has a powerful visual editor, has plenty of the basic features you need to build a professional website, offers web hosting, and offers direct customer support. However on the downside, the editor may seem overwhelming, you’ll only get access to limited themes, plugins, and integrations, and it may be a bit more expensive.

We’d recommend that if you are a new business owner looking to create a website, you may find Worpdress to be more helpful. If you are a web designer who is designing websites for other clients then you may prefer Webflow instead. Its web design tools are simply unmatched and will serve you well!


How to Check and Update Your PHP Version

Websites have always run on code, but it wasn’t always the case that they used multiple programming languages. Most modern sites use languages like JavaScript and CSS for scripts and design elements – back in the day, though, websites were typically just written in HTML.

Users who load up sites with their web browsers can point to the CSS and JavaScript elements present on a site, but there’s another highly important programming language that’s running on a website’s server: PHP. If you’re loading or hosting a WordPress site, PHP is responsible for almost everything on the front and back end.

From page templates and the WordPress dashboard to the plugins and themes installed on a website, PHP is a programming language that is inextricable from the platform we call WordPress.

What is PHP?

What is PHP?

PHP is a popular programming language that’s mainly used to create websites. It’s an open-source language that’s free to use, just like WordPress. In light of this fact, it’s easy to see why PHP is among the most commonly used languages in web development.

For example, popular websites such as Facebook have PHP running behind the scenes. It’s also what most of WordPress core is coded with. And you can use PHP for many exciting things, such as automating your WordPress login page and managing your WordPress posts.

Unlike languages such as HTML and CSS, which dictate the style and layout of a website, PHP is responsible for what a website actually does. PHP is server-side, so it gets processed on whatever machine is using a hard drive that stores the PHP code. This differs from client-side languages, such as JavaScript, that display the work they do on a user’s internet browser.

Because PHP is a server-side language, you’ll have to tackle site performance issues related to PHP by yourself. Even if someone had the most cutting-edge computer in the world, they’d still encounter issues when loading your website if you’re dealing with PHP-related site performance problems.

Why Updating Your WordPress Site’s PHP Version is Important

PHP is inextricable from your WordPress site and its performance – it’s responsible for pulling the right data from your database, packing it up in CSS and HTML, and rendering a complete website visible from your users’ internet browsers. In other words, if PHP slows down, so does everything else.

Additionally, it’s important that you keep your WordPress site’s PHP version up to date since using old versions can compromise your site’s security to vulnerabilities and cybersecurity threats. It’s little wonder, then, that PHP as a language has been consistently iterated throughout the years, spawning a ton of versions as a result.

According to WordPress’s official recommendation, you’ll want your server to at least be running PHP 7.4 so that you can run the current version of WordPress. As PHP improves over time, it becomes much faster and more secure. Security and speed are especially important for WordPress site owners or their employees who may need to access their sites remotely through a VPN (which is common, as statistics show that 15% of people utilize a VPN daily). At the time of this article’s writing, you’ll have the greatest speed and security if you’re running PHP 8.1 on your server.

Before you jump into checking and updating your WordPress site’s PHP version, it’s important to know that active support for older PHP versions is running out. Support for version 7.4, for instance, was removed in 2020, with its security support ceasing toward the end of 2021. So, if you need other reasons to update your WordPress site’s PHP version, the lack of active and security support for older versions will hopefully convince you.

How to Check Your WordPress Site PHP Version

There are several options at your disposal when it comes to checking your WordPress site’s PHP version. We’ll focus on three ways to view it below.

View Your PHP Version in WordPress’ Site Health Section

View Your PHP Version in WordPress' Site Health Section

The first and easiest way to view your PHP version is to simply log into your site and navigate to Tools > Site Health and click on the ‘Info’ tab. Then scroll down to where you see an accordion label for ‘Server’ and click to open it. Here you can quickly find your current PHP version, along with lots of other helpful information about your server, themes, plugins and your WordPress site in general.

Check Your PHP Version with Your Hosting Provider

WP Engine Check PHP Version

Another way to check your site’s PHP version is by checking your hosting management panel. If you access your hosting account and search its back end, you should be able to locate a menu named something similar to general ‘Site Information’ or ‘PHP Settings.’

For WP Engine users, this information is promptly displayed on your Sites section when you login. You can see which version you’re using directly through these settings, and you’ll be able to upgrade to a later version through the same settings as well.

Use a Troubleshooting Plugin

WPTools Plugin

As a WordPress site owner, you have the luxury of being able to use plugins. And depending on your needs you may already be using (or want to install) an all-in-one type troubleshooting plugin like WP Tools. For this plugin specifically there is a ‘PHPINFO’ tool that will display your PHP version, server configuration, etc. Using this plugin is straightforward: simply install it and then activate it, after which you’ll be able to check what your current PHP version is via your WordPress dashboard (as well as a ton of other information).

Now, if you already happen to be running the latest PHP version on your server, you can stop here. If, however, you need to upgrade your PHP version safely, then keep reading.

How to Update Your PHP Version for WordPress

Before you upgrade your PHP version, first things first.

  1. Check to see what the latest compatible version of PHP is for WordPress. You can view PHP compatibility in the Make WordPress Handbook, as well as a nifty chart that shows which WordPress versions play nice with each PHP version.
  2. Backup your WordPress site in case you run into incompatibilities between your site’s existing code (such as your WP themes, scripts, and plugins) and the version of PHP that you’re upgrading to.

Once you’ve created your local copy and finished backing up your site, you can also use the free PHP Compatibility Checker WordPress plugin to verify that you have no compatibility issues. Install the plugin and, once it’s installed, scan for potential errors and warnings and then update or possibly replace your incompatible themes or plugins. You can also follow the suggestions that PHP Compatibility Checker gives you.

Upgrade PHP

WP Engine Upgrade PHP Option

To actually upgrade your version of PHP, log into your hosting provider’s administrator dashboard. For WP Engine users, you’ll see a warning symbol next to your PHP version if there is an update available.

WP Engine Upgrade PHP

Just click to open a popup window and proceed with your PHP upgrade. It’s that easy!

Alternatively, your admin dashboard might have a menu item called something similar to ‘PHP Version Manager,’ after which you can go to the location of your website and choose the PHP version you want to run. Certain admin panels may require you to conduct your own search to find the necessary tool with which to upgrade – in this case; you may want to contact your provider.

Note: Because PHP is used on your server, which is typically owned and managed by your hosting company, they are the ones who decide when a PHP update will be available to you. This is a good thing though since trusted WordPress hosts will test for stability and compatibility before upgrading their server PHP and enabling update options for their customers.

PHP is the thing that keeps all the pieces of your WordPress site together, and it’s essential that you keep your PHP version updated. Doing so will provide you with greater site security and speed, and if you’ve checked and upgraded your PHP version per the steps laid out in this article, your site is in perfect shape to continue into the future!