All Content
Timespan
explore our new search
12 days of #ChristmaCSS Episode 12 - Sticky navigation bar in Power Pages
Dec 24, 2022 7:00 AM

12 days of #ChristmaCSS Episode 12 - Sticky navigation bar in Power Pages

by HubSite 365 about Kristine Kolodziejski [MVP]

Technical Architect || Microsoft MVP || 13x Microsoft Certified Professional

Pro UserPower PagesM365 Hot News

I'll show you how to add a sticky navbar to your Power Pages or website to make sure you do

Welcome to the last episode of #ChristmaCSS!!In today's video, I'll show

you how to add a sticky navbar to your Power Pages or website to make sure you

don't have t o scroll all the way to the top to see the navbar

Chapters

0:00 Intro

0:07 Welcome

0:34 Editing the HTML of the header

1:50 Adding the JavaScript

4:30 Adding the CSS

6:45 Adding the background blur for some extra-ness

8:34 Outro & Thank you

A sticky navigation bar

A sticky navigation bar is a website navigation interface that remains visible to the user as they scroll down the page. It is called a "sticky" navigation bar because it sticks to the top of the browser window as the user scrolls, providing the user with quick access to the navigation menu at all times.

Sticky navigation bars are used to improve the user experience by making it easier for the user to navigate the website. They are particularly useful for websites with a lot of content, as they allow the user to jump to different sections of the website without having to scroll all the way back up to the top.

To create a sticky navigation bar, a developer can use HTML, CSS, and JavaScript. They will typically set the navigation bar to have a fixed position at the top of the page, and then use JavaScript to detect when the user has scrolled down the page and apply a class to the navigation bar that changes its position to fixed. This allows the navigation bar to remain visible as the user scrolls.