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!
Share Improve this question edited Jun 9, 2014 at 14:22 iCollect.it Ltd 93.7k26 gold badges187 silver badges208 bronze badges asked Jun 9, 2014 at 14:20 Taylor JohnsonTaylor Johnson 4841 gold badge9 silver badges21 bronze badges 1- 1 Looks like you just need to use the css z-index property – Razzildinho Commented Jun 9, 2014 at 14:24
2 Answers
Reset to default 7Set 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)