jquery - Creating a custom, responsive website navigation bar / menu -

i've created horizontal fixed navigation bar site i'm working on. i'm trying work out details. i've read bootstrap can these things, attempts implement site lots of own css mess. i'm willing use jquery if necessary.

1. i want navbar fixed @ top of page, , span page's entire width. far, good.

2. i'd navbar's opacity, , maybe color, change when user begins scrolling. (less opaque.)

3. i'd site logo left-aligned, , several navigational buttons right-aligned, , i'd buttons , logos scale responsively based on screen size. don't want right , left aligned elements touch page edges. want padding.

i haven't found way implement opacity change, or keep logo , buttons in place , scaling properly.

what have, html:

<div id="navbar">      <ul> <li><a href="index.html"><img src="logo.png" align="left"></a></li> <li><a href="#1"><img src="button1.png"></a></li> <li><a href="#2"><img src="button1.png"></a></li> <li><a href="#3"><img src="button1.png"></a></li>     </ul> </div> 

and css:

#navbar ul { margin: 0; padding: 0; list-style-type: none; text-align: right; }  #navbar ul li { display: inline; text-decoration: none; }  #navbar { position:fixed; width:100%; height:40px; background:rgba(0, 0, 0, 0.6); text-decoration:none; margin:0px; padding-left:500px; padding-right:500px; padding-top:8px; top:0; word-spacing:40px; } 

any ideas?

use jquery

$(window).resize(function(){     if(window.innerwidth > 768)      {  //add sheet external css  //$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');  //remove entire style attribute:  //$("#nav").removeattr("style");  //add css  /*$("#voltaic_holder").css(          {"position":"relative",            "top":"10px",           "width": "500px";          });   */     }     else if(window.innerwidth > 1000)      {     }     else if(window.innerwidth > 1200)      {     }     else(window.innerwidth > 2000)      {     } }); 

or use easy css

@media , (max-width: 800px) {   .class {     width: 200px;     } }  @media , (min-width: 600px) {   .class {           width: 100px;           } }