Collection of free HTML/CSS header code examples: sticky, fixed, etc

Explore a collection of free HTML and CSS header code examples, including sticky, fixed, and other header styles to create dynamic navigation for your website.

Non Rectangular Headers

Non Rectangular Headers

Author:
Paolo Duzioni | June 27, 2018
Made with:
HTML (Pug) / CSS (SCSS)

About a code

Non-Rectangular header with inline SVG.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Curve Header

Curve Header

Author:
Omar Dsoky | January 18, 2018
Made with:
HTMLCSS

About a code

Pure CSS curve header.

Header Image Parallax Scrolling Effect with CSS

Header Image Parallax Scrolling Effect with CSS

Author:
Web Made Well | January 8, 2018
Made with:
HTMLCSSJavaScript (jQuery.js)

About a code

Create a parallax scrolling effect using CSS background-image position. This script works when the header image is positioned at the top of the page.

Fixed Angled Header

Fixed Angled Header

Author:
George W. Park | January 6, 2018
Made with:
HTMLCSS

About a code

This pen shows how CSS pseudo-elements and transforms can be used to create a fixed, angled header with an image background.

Skewed Header

Skewed Header

Author:
Arthur Camara | September 20, 2017
Made with:
HTML/PugCSS/Stylus

About a code

Skewed header with HTML and CSS.

Curve SVG Background Animation

Curve SVG Background Animation

Author:
Arman | July 16, 2017
Made with:
HTMLCSS/SCSSJavaScript

About a code

Curve SVG background animation for header.

Cool Header Color Line

Cool Header Color Line

Author:
NANOUU | February 18, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Header Idea

Author:
Alvaro Montoro | March 30, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Minimal Responsive Header & CSS Animations

Author:
Rafaela Lucas | January 30, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Hover Effect for Headers

Author:
Olivia Ng | February 25, 2019
Made with:
HTML (Pug) / CSS (SCSS)

About a code

8 hover effects for header in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-
Header for Landing Page

Header for Landing Page

Author:
Gerardo Valencia | February 27, 2018
Made with:
HTML / CSS

About a code

Header for landing page using clip-path.

Sexy Animated Rainbow Waves Header

Sexy Animated Rainbow Waves Header

Author:
Jeffrey Bennett | September 4, 2017
Made with:
HTMLCSS

About a code

Just a little front-end UI experiment.

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨