Adding a Fixed Top Menu with CSS

To add a fixed top header to a website using CSS. This allows page content to scroll underneath the top header div, so the (websiteHeader) is always on top and at the top of the page.

Adding a z-index to the websiteHeader puts the header above page images and image sliders

#websiteHeader {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 400;
}

You’ll also need to add a top margin (approximately the same height as the header div) to the main content (mainpageContent)

#mainpageContent {
margin-top: 30px;
}

Dealing with the WordPress admin menu with a fixed top menu.

This bit deals with the WordPress admin menu and adds a bit of space if you’re logged into WordPress

.admin-bar #websiteHeader  {
  top: 32px;
}