Mobile Header

I would like to create a thin header - for my first responsive website - that remains at the page top as mobile users scroll/thumb through the rest of the page.

What is the best way to do that for mobile?

Do I need to use “absolute” or something?

The exact way you’d do it for desktop - a fixed header. Just search google for some “fixed header css tutorials” and you’ll be sure to find examples of how they do this.

There are many examples and tutorials online on how to do this; simple enough :slight_smile: .

Does it involve absolute positioning?

Nope. Absolute won’t keep it on screen, as you may know from CSS.

You want fixed positioning; e.g. position:fixed. That keeps stuff on the screen as you scroll.

Then you need to make sure that it doesn’t overlap any other elements on page (usually give the <body> a top padding = to the height of the fixed “header”), and there you go.

If I remembered CSS I wouldn’t be here pestering you… :wink:

Oh I need my SitePoint books!!

I thought you made websites for a living…? Or used to?

I used to do a combination of business and back-end development.

When I bought my first SitePoint books 5 years ago, I was pretty handy with HTML and CSS. But then life happened and I haven’t done any front-end stuff except for minor tweaks in maybe 4 years.

(Kind of ironic I want to start a side business doing responsive design, don’t you think?!)

And all of my SitePoint books are locked away in storage out of state where I can’t get to them.

If I ever get back to work, I think I need to buy the whole suite all over again! :disappointed:

The fixer header is much more appropriate. You can also search for “fixed header css tutorials” you will find plenty of tutorials and other examples of how to do this.

Post edited by TechnoBear to remove fake signature

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.