How to have Sticky Header? What is it?

Sticky Header in Wordpress

STICKY HEADER

Go to www.LawyersTech.com on a computer.
Go inside any post.
Scroll down. (I mean using your mouse or trackpad, start going to the bottom of the page.)
You will see that a light blue coloured ‘HEADER’ appears on the top. This header has menu (Build your website, Best etc) on it.
Even if you scroll to the bottom that header remains there. It sticks there on the top of page.

Sticky Header Lawyers Tech

*I have switched to other theme for Lawyers Tech and now I do not need sticky header on this website. But sticky header is on my other website WritingLaw.com. This link will open in new tab. You can see what Sticky Header looks and feels like on this website.

What is Sticky Header and how to get it

Such headers which do not disappear even after user scrolls down on the page is called ‘Sticky Header’

Importance of Sticky Header.

If you have long post then this is really helpful for your visitors. They can look at the different options without having to scroll back on top.

It serves like a mini version of ad. See, most probably a visitor comes to this website from Google Search. Suppose he came here for ‘How to install Plugin?’ The sticky header will also tell him that this website has a guide on ‘Website Building’ and ‘News Headlines’ etc. So a visitor might get tempted to look at those too.

How to get Sticky Header?

Many WordPress themes support sticky header.
They are built in. If your theme has one you can activate it.
If sticky header has translucent background or some colour you do not like, then simply contact theme support. Ask them ‘What is the CSS code to change sticky header’s colour?’
They will give you a code. You simply have to go to your theme customization panel – ADDITIONAL CSS – PASTE THE CODE THERE.
Click Publish. You will see the changes.

HOW TO GET STICKY HEADER IF THEME DOES NOT SUPPORT IT?

1- Install ‘myStickymenu’ plugin by going to you WordPress Dashboard – PLUGINS – ADD NEW – Search for ‘myStickymenu’
Link- https://wordpress.org/plugins/mystickymenu/

myStickymenu Install

2- Activate it.
3- Now go to your installed plugins page.
4- Hover your mouse on SETTINGS (left side bar).
5- You will see ‘myStickymenu’. Click on it.
myStickymenu in settings6- Now open your website in new tab. Does sticky menu show on scrolling down. (Maybe not. So continue reading. If sticky header shows, then great. Next steps aren’t for you. Though you may check last paragraph.)
myStickymenu Options
7- Now you have to find the Sticky Class for the menu / header which you want to act as sticky header.
(For lawyer’s tech it is just below the site name- Place where ‘Build My Website, Best, News Headlines etc’ are there. Similarly your theme will also have it at top somewhere- Where your main menus are.)
8- Now open a new tab in Google Chrome or Firefox. (No other browser)
9- Go to the homepage of your website. (www.yourdomain.com)
10- Now do not click anywhere. Just place your mouse pointer on an empty place (where there are no link) of the Menu bar / Menu header.
MENU POINTER POSITION11- If you are in Firefox right click and select ‘Inspect Element’
If you are Chrome right click and select ‘Inspect’

12- You will see something like,
<nav id=“menu-secondary” class=“menu menu-secondary nav-menu
Menu Header ClassThere will be lots of code. This will be highlighted. (around 3 lines of code)

13- Just next to <nav id= is your sticky class.
For Example- In the above example, menu-secondary is the Sticky Class that we need.

14- Now go to myStickymenu setting page.
In Sticky Class write,
#menu-secondary (put # and just adjacent to it the sticky class name that you saw next to <nav id=” )
(for example in our case it is #menu-secondary)

15- Click Save Changes.

16- Go to top left corner of your WordPress Dashboard and open your website in new tab.
You will se Sticky menu working when you scroll down on homepage or inside post.
(You may want to clear cache if you have any cache plugins installed.)

Now, you can go to SETTINGS – myStickymenu – STYLE – STICKY BACKGROUND COLOUR and change the colour of the sticky header.
Save Changes.
Do not change anything else that you do not understand.
Next you may go to ‘ADVANCED’ and disable sticky menu at certain places. (This is not needed though.)

No Comments

    How was the article? Leave a comment...

    Next
    YOAST SEO EXPLAINED This plugin has plethora of features. Millions…