Breadcrumbs

[Master M1nd]

hmmm i just make a top bar for my blogger template! it is good
here is the coding

CSS

Code: Select all

#topbar {
	background-color:#FAB759;
padding: 5px 5px;
position:fixed;
top:0;
left:0;
z-index:2000;
width:100%;
height:20px;
text-align:center;
font-family: 'Open Sans', sans-serif;
-webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;


}

#topbar:hover{
background:#FA596C;

}

The Only problem of it is that it comes on the header
I want that it should stay at the top not come to the header place! due to this it comes near to my Logo ! ( in Header)


and other thing!
and you see that there is #tobar:hover
and only background color will change on hover
i want that if it is on top it's opacity should be 100%
after we scroll down the page
it's opacity should come at 50%
and when on hover in Scrolling case it should go in 100%
i think it can only be done through JS ?
well i am learning JS these days

[zachman61]

Can you show us an example of it live?

[Master M1nd]

This is the example:
http://davidwalsh.name/demo/top-bar-opa ... ary=jquery

But it also comes on header, i want that it should stay away ( stay at top ) from header and should not come on header! cooll;