Você está visualizando atualmente How to add a sticky menu or a floating item on WordPress?

How to add a sticky menu or a floating item on WordPress?

  • Autor do post:
  • Categoria do post:Dicas WordPress
  • Tempo de leitura:12 minutos de leitura

It’s done: you’ve designed a great WordPress site.

But you realize that the offer you’re making is hardly visible to your visitors on your “About” page or in your blog posts.

How can you highlight this great offer, and encourage the conversion of your visitors?

The answer can be very simple: put a floating or “sticky” banner in the sidebar! And why not take the opportunity to make your menu floating too, to facilitate the navigation of your visitors?

In concrete terms, once you’ve made your element sticky, it will remain fixed during navigation. In other words, even when scrolling down a long page, there is no more risk of getting lost: the sticky element remains floating and accessible to the visitor at any time. Saved!

The goal is to attract attention without distracting the user from his reading. Less intrusive than a popup, a floating menu guides the reader towards your conversion goal.

For example, look at how WPMarmite suggests that you subscribe to its newsletter above (I’m just saying… ).

Option 1: Use a compatible theme

The fastest solution may be right in front of you. Without knowing it, your theme may offer a feature to make your header sticky. Look at what it says on its presentation page, or go snooping in the settings.

To help you out, here are several solid themes that have the capability to create a fixed menu on scroll:

  • Astra, the most famous theme in the official directory. Its Pro version offers a module called “Sticky header.”
  • GeneratePress offers the same thing in its paid version, via the “Menu Plus” module.
  • Blocksy provides access to this option through its Header Builder, if you use Blocksy Pro.

With these three, you will need a premium license to create a floating menu. If you are already using one of them, good for you.

But if you don’t feel like spending your budget on a premium theme, there are also some great themes that offer a sticky option for free.

For instance, there is the excellent Kadence. Once you’ve activated the theme, head to the WordPress Customization Tool via Appearance > Customize.

Go to the Header > Sticky Header menu. At the “Enable Sticky Header?” drop-down menu, select “Yes – Whole Header.” You can even choose to display a different logo when the header is fixed, and enable/disable the sticky effect on mobile.

Do you like your current theme, but it doesn’t have an option to create a floating menu or element?

In that case, turn to solution #2: using a dedicated plugin. Sticky Menu & Sticky Header (formerly Sticky Menu (or Anything!) on Scroll) is one of the most famous of them. It has 100,000+ active installations and an excellent rating of 4.7 out of 5 stars. So you can use it with your eyes closed.

You can use this plugin for almost anything: navigation menu, widgets, subscription to your newsletter, sharing button on social networks… You just have to choose the best location for your floating element:

  • At the top of the page: the menu or header, or a shopping cart for a store
  • In the sidebar: various calls to action in widgets
  • Or at the bottom of the screen: social sharing buttons, for instance

Download the Sticky Menu & Sticky Header plugin:

Well, what next?

After downloading and activating the plugin, go to its configuration options via Settings > Sticky Menu (or Anything!):

How to make an item floating (sticky)

Now, roll up your sleeves: even if this plugin makes your task much easier, you’ll still need to get your hands a little dirty.

Take heart, I assure you that it won’t be too much trouble. To define the element you want to paste, you first need to find its ID or class.

To examine the source code of your theme and find the CSS class of your future floating element, nothing could be easier: use the code inspector of your browser.

To do this, go to the page of your choice on your WordPress site, then right-click and choose “Inspect.”

Then simply move your mouse over the element in question, and presto! As if by magic, the corresponding lines of code are highlighted:

All you have to do is copy the ID that appears. By default, it will look something like this: