Force fixed nav bar on top of iframe - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Nav Bar

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Nav Bar

Description

Force fixed nav bar on top of iframe

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
nav {<!--from  w  w  w.  j ava 2  s . c  o m-->
   position:fixed;
   background:red;
   top:0;
   width:100%;
}

body {
   margin:0px;
   padding:0px;
}
</style> 
 </head> 
 <body> 
  <nav>
    Lorem ipsum dolor 
  </nav> 
  <p>Lorem ipsum do</p> 
  <iframe width="420" height="315" src="http://www.youtube.com/" frameborder="0"></iframe> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <iframe width="420" height="315" src="http://www.youtube.com/" frameborder="0"></iframe> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <p>Lorem ipsum d</p> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>  
 </body>
</html>

Related Tutorials