Transparent Horizontal Navigation
# February 8, 2013 at 11:28 pm
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.# February 9, 2013 at 9:43 am
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)# February 10, 2013 at 7:34 pm
@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.. :)# February 11, 2013 at 4:01 am
I had a go at what I think you were after [here](http://codepen.io/anon/full/robGj “http://codepen.io/anon/full/robGj”). 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 :)
You must be logged in to reply to this topic.