hi, I'm very very newbie in css. and i'm trying to build my own wordpress theme. But i have one problem with navigation bar. i want the navigation bar to be transparent at normal view. and when you hover it, it's opacity should be 1.
can you give me an example of it? I've been stuck in this section.. please help me.
thank you.
I'm sure you mean the background property. If you don't want any transition effects (css3) you just have to remove all of the
-*-transition: all 0.4s
properties. Here is the codepen: http://codepen.io/anon/pen/Bmtyu
I hope this example help's you ( this is sass - CSS without brackets, you should be able to understand it)
@paulie_d: i'm referring to the background-color
@Scribblerockerz: here the codepen: http://codepen.io/anon/pen/lGBqe
The navigation bar should be full block with transparent background. i don't know why it shows like that... :(
ps: i'm sorry for my bad english. i hope you know what i meant.. :)
I had a go at what I think you were after here. In it, I used rgba and Sass to get the transparency of background, as well as Compass' transition to make the opaque background fade on hover.
I also wasn't sure what you meant by block, so I thought perhaps you meant that you wanted the whole nab bar to be the colour, so I put that in as well. Hope it helps :)
hi, I'm very very newbie in css. and i'm trying to build my own wordpress theme. But i have one problem with navigation bar. i want the navigation bar to be transparent at normal view. and when you hover it, it's opacity should be 1. can you give me an example of it? I've been stuck in this section.. please help me. thank you.
You really can't use opacity for that as it will hide the whole thing, including the contents.
Is that what you want? If so how will people know it's there?
Or are you just referring to the background-color?
I'm sure you mean the background property. If you don't want any transition effects (css3) you just have to remove all of the
properties. Here is the codepen: http://codepen.io/anon/pen/Bmtyu I hope this example help's you ( this is sass - CSS without brackets, you should be able to understand it)
You could just do:
Same difference.
If you want fade effects then the transition property is also an option.
@paulie_d: i'm referring to the background-color @Scribblerockerz: here the codepen: http://codepen.io/anon/pen/lGBqe The navigation bar should be full block with transparent background. i don't know why it shows like that... :(
ps: i'm sorry for my bad english. i hope you know what i meant.. :)
Offhand I would think that it's because you are using absolute positioning on your logo.
I'll dig deeper later but if it's the first element on your page there really should be no need to position it like that.
I had a go at what I think you were after here. In it, I used rgba and Sass to get the transparency of background, as well as Compass' transition to make the opaque background fade on hover.
I also wasn't sure what you meant by block, so I thought perhaps you meant that you wanted the whole nab bar to be the colour, so I put that in as well. Hope it helps :)
thx to @david_leitch for the code... it work now.