CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Taylor Johnson
Taylor Johnson

Reputation: 484

Overlaying a Fixed Header Over Elements When Scrolling

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:

enter image description here

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!

Upvotes: 2

Views: 2775

Answers (2)

Mike Soule
Mike Soule

Reputation: 742

The z-index property is a common 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.com/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)

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

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 */
}

Upvotes: 7

Related Questions