Creating a custom, responsive website navigation bar / menu

Question

I've created a horizontal fixed navigation bar for a site I'm working on. I'm trying to work out some details. I've read that bootstrap can do these things, but my attempts to implement it into a site with lots of its own CSS was a mess. I'm willing to use jquery if necessary.

1. I want the navbar fixed at the top of the page, and to span the page's entire width. So far, so good.

2. I'd like the navbar's opacity, and maybe color, to change when the user begins scrolling. (Less opaque.)

3. I'd like the site logo to be left-aligned, and the several navigational buttons to be right-aligned, and I'd like the buttons and logos to scale responsively based on screen size. I don't want the right and left aligned elements to touch the page edges. I want some padding.

I haven't found a way to implement the opacity change, or to keep the logo and buttons in place and scaling properly.

What I 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?

Answer 1

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 the 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 all and (max-width: 800px) {
  .class {
    width: 200px;
    }
}

@media all and (min-width: 600px) {
  .class { 
         width: 100px; 
         }
}

Answer 2

use easy css mediaqueries instead of using jquery

@media all and (max-width: 800px) {
  .class {
    width: 100%;
    }
}

@media screen(max-width: 768px) and (orientation: portrait/landscape) {
 .applelandscape {
      width: 30%;
      float: right;
         }
}

@media all and (min-width: 600px) {
  .class { 
         width: 20%; 
         }
}

Note: Avoid using CSS properties in pixel or points.I Prefer using % instead. To reply for your question on padding, Don't use padding-left: 50px; use like padding-left: 5%;

I would always prefer using media queries for responsive based designs. This would be a best solution for all kind of devices output.