A common practice amongst modern WordPress websites is to stickify certain elements to the top of the page when the website visitor scrolls down past the sticky element. There are numerous scripts and guides available that will allow you to implement a sticky header or menu yourself. However, it’s not always the simplest of tasks to carry out and could take up lots of valuable hours.

Plugins for Sticky Header and MenuSource: kaboompics / Pixabay.com
Image Source: kaboompics – Pixabay.com / License: CC0 Public Domain

Implementing a sticky header menu can be particularly difficult for WordPress beginners who may never have experienced modifying code before. And this is where the WordPress Plugin directory comes in handy. There you can find a variety of simple WordPress plugins that will do all of the hard work for you by forcing your chosen element to stick to the top of the page.

Finding your chosen element

Finding the element you want to stickify is easy, and can be achieved via your preferred web browser and inspection tools like Firebug. Using the MH Magazine demo as an example, right-click the main menu Home link and select Inspect Element from the menu. In some browsers this may simply be referred to as Inspect. A new window will appear, either externally or attached to your browser. This window will display a collapsible structure containing the code of the area you are inspecting.

Header Code

For example, the screenshot above shows the

1
<header>

element in full. The dark blue highlighted line initially indicates the precise location of where you right-clicked the demo to begin inspecting the code. It also indicates which element is the currently selected element, with all CSS styles being applied to this particular element being displayed to the right of this code structure.

This is useful for debugging and modifying your CSS code. You can collapse and expand the code structure by clicking on the small arrows alongside each line. This allows you to further inspect any element of the demo. By moving your mouse cursor over this code structure, you will be able to identify the initial element that contains the area you would like to stickify. In this case that would be the

1
mh-main-nav-wrap

element within the header of the website.

Please look at the beginning and end of the

1
mh-main-nav-wrap

element. You will notice, that this element contains the entire main menu area of the site. Directly after this element ends, an entirely new element begins – the

1
mh-extra-nav-wrap

element. This is how you can easily determine which is the initial element of the area you want to stickify.

Sticky Menu Plugins

There are a variety of useful and suitable WordPress plugins available to you that will help you apply stickiness to any element of your currently active WordPress theme with ease. Let’s have a look at a few of these great plugins which can do the work for you and make your header or menu sticky.

Sticky Menu (or Anything!) on Scroll

Sticky Menu
Image Source: Screenshot – WordPress.org

One of the most popular sticky menu plugins available with excellent reviews and over 20,000 active installations to date is Sticky Menu (or Anything!) on Scroll. This WordPress plugin allows you to easily select any element of your currently active WordPress theme and apply stickiness to it.

Upon plugin activation, a new menu option will be available via the Settings admin menu. There you can easily choose which element will become stickified. Additional options are also included. They give you control over spacing, z-index, and even a push-up option. This useful plugin also offers additional trouble-shooting tips and options to help you get things working with your theme.

Sticky Header by ThemeatoSoup

Sticky Header
Image Source: Screenshot – WordPress.org

Sticky Header by ThemeatoSoup is a cool WordPress plugin that adds a customizable sticky header to your WordPress theme via the Customizer. You can easily change the style of the header and you’re able to select a custom logo image and include any of your menus. This plugin works out-of-the-box and offers an alternative approach to sticking web elements to the top of the page.

myStickymenu

myStickymenu
Image Source: Screenshot – WordPress.org

myStickymenu is a lightweight plugin. It simply offers you the ability to stickify any of your menus to the top of the page after the user scrolls past a certain point. The menu selection is controlled by adding the appropriate CSS class / ID that contains your chosen menu into the relevant text field. The sticky element is very customizable using a simple interface with options for z-index, custom css, opacity, colors, transitions, plus much more.

Problem-Solving when Implementing Sticky Elements

Promising to stickify any element of any theme is a broad statement. And of course not everything will always work out at the first time of asking. Elements overlapping the sticky element is a common issue that you may experience when trying implement stickied elements to your website.

Most of the afore-mentioned plugins do offer z-index options. They allow you to avoid this issue completely, but some aren’t so comprehensive. You can easily rectify the problem using CSS. Simply add a high z-index value to the sticky element on your website. By either adding code to your child theme style.css file, or by using a WordPress plugin to add custom CSS, for example:

.your-sticky-element { z-index: 9999; }

In some cases, the use of

1
!important

may also be necessary to forcefully override the z-index value of the sticky element on your site. Other than that, using these WordPress plugins you should be good to go when applying sticky header or sticky menus to your WordPress website.

image sources