I have a fixed header, so that when I scroll it remains at the top of the page so that visitors may navigate quickly or skip sections of the page.

Here is a picture of my problem:

The problem is pretty simple - I want my header to float over the top of any other objects instead of being hidden by them, but I assume there isn't a way to do it without javascript. Here is my CSS:

#primary header {
position: fixed;
margin: 0;
padding: 0; 
width: 100%;
height: 50px;
background-color: rgb(49,49,49);
}
nav { /* positions nav menu */
position: fixed; /* keeps the nav bar fixed at top when scrolling */
top: 1.25%;
left: 27%;

}
nav a {
margin: 0 50px;
padding: 10px 20px;
font-size: 20px;
}

Anyway I can do this? I am not familiar with Javascript, but would love some help!

I have a fixed header, so that when I scroll it remains at the top of the page so that visitors may navigate quickly or skip sections of the page.

Here is a picture of my problem:

The problem is pretty simple - I want my header to float over the top of any other objects instead of being hidden by them, but I assume there isn't a way to do it without javascript. Here is my CSS:

#primary header {
position: fixed;
margin: 0;
padding: 0; 
width: 100%;
height: 50px;
background-color: rgb(49,49,49);
}
nav { /* positions nav menu */
position: fixed; /* keeps the nav bar fixed at top when scrolling */
top: 1.25%;
left: 27%;

}
nav a {
margin: 0 50px;
padding: 10px 20px;
font-size: 20px;
}

Anyway I can do this? I am not familiar with Javascript, but would love some help!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Jun 9, 2014 at 14:22 iCollect.it Ltd 93.7k2626 gold badges187187 silver badges208208 bronze badges asked Jun 9, 2014 at 14:20 Taylor JohnsonTaylor Johnson 48411 gold badge99 silver badges2121 bronze badges 1

• 1 Looks like you just need to use the css z-index property – Razzildinho Commented Jun 9, 2014 at 14:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

Set the css z-index property on your fixed element. The higher the value, most in front it will get...

Like:

#primary header   {
    z-index: 999; /* SET THE NEEDED AMOUNT */
}

The z-index property is a mon solution to elements which are positioned, but it looks like YouTube has provided a solution as well.

Add a parameter to force YouTube iframe to set a low z-index.

If you have any element you’ll like to show above a YouTube iframe you just have to add a parameter to the iFrame URL.

Ricard Torres' Personal Blog

<iframe width="560" height="315" src="//www.youtube./embed/0HxNtWEIKhQ?wmode=transparent" frameborder="0" allowfullscreen></iframe>

JSFiddle didn't seem to reproduce the issue, but here is an example as well:

JSFiddle Example

StackOverflow Duplicate Question

YouTube API Documentation (Preferable Embedding Method)