Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Transparent Horizontal Navigation

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #42588
    inibudi
    Member

    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.

    #123861
    Paulie_D
    Member

    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?

    #123895
    Scribblerockerz
    Participant

    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)

    #123896
    Paulie_D
    Member

    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.

    #124012
    inibudi
    Member

    @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.. :)

    #124027
    Paulie_D
    Member

    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.

    #124030
    David_Leitch
    Participant

    I had a go at what I think you were after [here](http://codepen.io/anon/full/robGjhttp://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 :)

    #124670
    inibudi
    Member

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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.