Jump to content
View in the app

A better way to browse. Learn more.

Learn more

Sticky Header

Featured Replies

This site utilizes a "Sticky" header that remains on scroll.

Can someone please tell me the CSS for specifically making the any one of the 4 various levels of the Header, stick?

TYIA

Solved by Ehren

  • Community Expert
  • Solution

Hello,

The code will depend on what header you want to become sticky. But the general idea is:

.ipsHeader{
	display: contents;
}
.ipsHeader__primary{
	position: sticky;
	top: 0;
	z-index: 5;
}

Change the .ipsHeader__primary class to the header element which should become sticky.

Recently Browsing 0

  • No registered users viewing this page.

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.