About HTML/CSS (HELP)

3 posts Page 1 of 1
Contributors
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

About HTML/CSS (HELP)
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 :)
User avatar
zachman61
VIP - Donator
VIP - Donator
Posts: 1891
Joined: Wed Dec 16, 2009 9:56 pm

Re: About HTML/CSS (HELP)
zachman61
Can you show us an example of it live?
Nailing my feet to the floor is easier than using my own muscles to balance, but you don't see me doing that :)
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: About HTML/CSS (HELP)
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;
3 posts Page 1 of 1
Return to “Help & Support”