Cambiar tamaño de una capa al hacer mas pequeño el navegador

[Paranoid]

Hola,

me gustaria poder aladir a mi web una barra superior como la de este blog:

http://rbecksite.blogspot.com/

El codigo es ese:

Código HTML:

<div class='navbar section' id='navbar'>
    <div class='widget Navbar' id='Navbar1'>
      <iframe src="http://www.blogger.com/navbar.g?targetBlogID=31738534&amp;blogName=ShaRiNg+My+WorLD&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=LAYOUTS&amp;homepageUrl=http%3A%2F%2Frbecksite.blogspot.com%2F&amp;searchRoot=http%3A%2F%2Frbecksite.blogspot.com%2Fsearch" height="30px" width="100%" marginwidth="0" marginheight="0" scrolling="no" id="navbar-iframe" frameborder="0">
      </iframe>
     <div id="space-for-ie">
     </div>
    </div>
  </div> 

El tema es que no se como hacen para que cnd lo haces mas pequeño se vayan ocultando los elementos de la barra... gradualmente... y otros se muevan.

Gracias