Using CSS to Create a Fixed Header

Fixed headers are a popular trend in web design, and adding one to your site can be as easy as adding a position: fixed line to your CSS, but often it’s a little more complicated than that. Some other styling factors you’ll need to consider are top, width, and z-index. It’s important that you set top to 0 if you want the header to be fixed to the very top of the page. Additionally, you’ll probably want to make the width of the header 100% if it isn’t already — the fixed header might look a little strange as you scroll down the page if it doesn’t take up with entire width of the screen. You should also definitely add a high z-index to ensure that the header scrolls over all of the content below it, not underneath it.

Here’s an example of what the typical CSS code might look like to make a header appear to be fixed.


.fixed-header{

position: fixed;

top: 0;

width: 100%;

z-index: 10000;

}

If you’d like the header to be positioned statically or absolutely and then be fixed once you’ve scrolled past it, you can do this using simple jQuery and JavaScript to calculate the height of the area above the header, and have the fixed styling added dynamically to the header after the user has scrolled past that point. In the following example, #nav is the header, #top is the area above the header, and .fixed-header is the CSS class that contains the fixed positioning styling:


var n = $("nav");
var height = $('#top').height();

$(window).scroll(function(){
if($(this).scrollTop()>height){
n.addClass("fixed-header");
}
else{
n.removeClass("fixed-header");
}
})

How to Style Mandatory Fields with CSS3 Pseudo-Selectors

Screen Shot 2016-08-14 at 3.42.04 PM

It’s not uncommon for mandatory fields in a form to be marked as such — often these fields are marked with an asterisk or with a colored border around the input so that the user is aware that the particular form can’t be submitted without the required fields being filled out. With CSS3’s pseudo-selector :required, […]

Read on...

How To Use CSS3’s :not() Pseudo Selector

Screen Shot 2016-08-09 at 9.33.57 AM

CSS3’s :not pseudo selector makes it possible for you to select and apply styling to every type of element except one. This handy little trick can save you from having to manually write a lot of CSS code, because in just one line you can define a style to be applied to certain elements while […]

Read on...

Create Drop Caps Using CSS3

Screen Shot 2016-08-03 at 11.00.55 AM

A drop cap is the first letter of a paragraph or a text block that is larger and usually styled differently from the rest of the letters. This can be done a number of different ways, including inserting <span> tags into your HTML, but one effective and quick way to do it is by using […]

Read on...

Quick Tip: How to Minify Your CSS

Screen Shot 2016-07-25 at 5.39.31 PM

Minifying your CSS basically means to get rid of all of the unnecessary characters (spaces, line breaks, etc) to strip down your stylesheets so that only what is absolutely essential to run the code remains. Putting your CSS through this process makes your code more lightweight and can help to increase the speed and efficiency of […]

Read on...

CSS3’s Content Property

Screen Shot 2016-07-19 at 3.44.00 PM

CSS3’s content property allows for content to be added to the page from within the CSS. This is useful in styling, but it’s especially useful if for some reason you don’t have access to or don’t want to edit your HTML files. The content property is used in conjunction with the :before and :after pseudo-selectors to […]

Read on...

How to Use CSS’s Counter-Reset Property

Screen Shot 2016-07-18 at 10.02.18 AM

Most developers probably think of CSS as a means to bring designs to life, but CSS3 is capable of going beyond aesthetics. CSS3’s counter-reset property can actually be used to assign chronological numbers to certain sections and subsections of your HTML, which you can then use number certain elements. For this example, we’ll use the property to […]

Read on...

CSS3’s Font Shorthand

Screen Shot 2016-07-10 at 12.45.16 PM

There are many CSS font properties available to style your fonts. If you need to define the font-style, size, family, and weight, that can add up to a lot of lines of CSS. Fortunately, however, there is a shorthand for CSS font properties. Here’s the formula: Make sure you don’t forget the forward slash between […]

Read on...

Using CSS3’s Outline Property

Screen Shot 2016-07-10 at 12.25.09 PM

CSS3’s outline property is one that is often thought to be interchangeable with the border property. Though the two properties are very similar, the outline property can actually be used to place an outline OUTSIDE of a defined border. There are three facets of the outline property: outline-style, outline-color, and outline-width. Outline-style takes a bunch […]

Read on...

How to Use CSS3’s Line-Height Property

Screen Shot 2016-07-07 at 11.20.14 AM

CSS3’s line-height property is one that is often underrated and misunderstood. The property can be very helpful in styling certain elements, and it can take many different types of values, including number values, pixel values, and percentages. Let’s apply it to this paragraph to see how it works: This paragraph has the default line-height value […]

Read on...