Grow your CSS skills. Land your dream job.

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 2:53 am

    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?

    # 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 9, 2013 at 9:47 am

    You could just do:

    ul {
    background:transparent;
    }

    ul:hover {
    background: whatevercoloryou want;
    }

    Same difference.

    If you want fade effects then the transition property is also an option.

    # 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 2:28 am

    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.

    # 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 :)

    # February 14, 2013 at 10:53 pm

    thx to @david_leitch for the code… it work now.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".