764 - 0
yes

design and style your friendburst profile – navigation bar

2010-12-06 at 04:02 am BlogBlog  RSSRSS  Subscribe

nav bar – background and border

div#header ul#main_nav {
background-image: none;
background-color: blue;
border: 1px solid red;
padding-bottom: 0px;
}

nav bar – font

div#header ul#main_nav li a,
div#header div#right_nav ul li a {
color: gold;
}

nav bar – hover effect

div#header ul#main_nav li:hover a,
div#header div#right_nav ul li:hover a {
color: black;
background-color: transparent;
}

nav bar – dropdown menu – border

div#header ul#main_nav li ul, div#header div#right_nav ul li ul {
border: 1px solid red;
border-top: 0px;
}
div#header ul#main_nav li ul li.first, div#header div#right_nav ul li ul li.first {
border-top-width: 0px;
}

nav bar – dropdown menu – position fix

div#header ul#main_nav li ul {
margin-top: 1px;
}
div#header div#right_nav ul li ul {
margin-top: 2px;
}

nav bar – dropdown menu – font and background

div#header ul#main_nav li ul li a,
div#header div#right_nav ul li ul li a {
color: gold !important;
background-color: blue !important;
}

nav bar – dropdown menu – hover effect

div#header ul#main_nav li ul li:hover a,
div#header div#right_nav ul li ul li:hover a {
color: black !important;
background-color: green !important;
border: none;
}

nav bar – dropdown menu – “explore” icons
I thinks it’s not necessary to hide them, but just in case…

div#header ul#main_nav li.explore ul li a,
div#header ul#main_nav li.explore ul li:hover a {
background-image: none !important;
padding-left: 5px;
}

Last 5 posts by pfeiffer_stylez


View Counter: 1,182 views


30 Responses to “design and style your friendburst profile – navigation bar”

  1. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  2. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  3. AWESOME, once you are finished with all this, i’ll add a link in my siggy ;-)

    Likes: Thumb up 0

  4. Brother what am I doing wrong? I can`t make the hover to work on the right side on the top navigation bar ( setting/Logout )
    This is the I`m using.
    div#header ul#main_nav {
    background-image: none;
    background-color: transparent;
    border: 0px;
    padding-bottom: 0px;
    }

    div#header ul#main_nav li a {
    color: black;
    }

    div#header div#right_nav ul li a {
    color: black;
    }

    div#header ul#main_nav li:hover a {
    color: white!important;
    background-color: transparent;
    }

    div#header ul#main_nav li ul {
    border: 1px solid gray;
    border-top: 0px;
    margin-top: 1px;
    width: auto !important;
    min-width: 0px !important;
    white-space: nowrap;
    }

    div#header div#right_nav ul li ul {
    border: 1px solid gray;
    border-top: 0px;
    margin-top: 2px;
    }

    div#header ul#main_nav li ul li.first {
    border-top-width: 0px;
    }

    div#header div#right_nav ul li ul li.first {
    border-top-width: 0px;
    }

    div#header ul#main_nav li ul li a {
    color: white!important;
    background-color: transparent!important;
    padding-right: 5px !important;
    }

    div#header div#right_nav ul li ul li a {
    color: white!important;
    background-color: transparent!important;
    }

    div#header ul#main_nav li ul li a {
    width: auto !important;
    min-width: 0px !important;
    white-space: nowrap;
    }

    div#header ul#main_nav li.explore ul li a {
    padding-right: 5px !important;
    }

    Likes: Thumb up 0

  5. i copied all the titles/ codes and pasted into notepad. then i copied/ pasted one specified section of code in at a time into my CSS box and tweaked the borders/ colors.

    * i didn’t have any problems with the right-side hovers or any other codes on this page *

    these worked well….Thanks ;-)

    Likes: Thumb up 0

  6. I was missing 2 codes :)

    Likes: Thumb up 0

  7. keep in mind that li:hover doesnt work in most versions of IE -- works great in firefox tho

    Likes: Thumb up 0

    shän
    shan1 Reply:

    +1, I didn’t realize (forgot about?) that, and then noticed it when I was messing with it a couple days ago.

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Isn’t that a problem for IE-6 & IE-7 “only” ? On my screen it’s working fine in IE-8, and IE-9 should also be able to handle it.

    Likes: Thumb up 0

    shän
    shan1 Reply:

    Where are you using it?

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Windows 7 / IE-8 on a Toshiba Satellite P300 …

    Likes: Thumb up 0

    shän
    shan1 Reply:

    I mean, where in the layout are you using it?

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Wooops. ^^ My fault…
    I use it in the same way as described in the example codes.
    IE screenshot:
    http://i56.tinypic.com/2m9szl.png

    btw, I still try to change the active li (in the screenshot it’s “profile”)…

    Likes: Thumb up 0

    shän
    shan1 Reply:

    nav bar – hover effect
    div#header ul#main_nav li:hover a,
    div#header div#right_nav ul li:hover a {
    color: black;
    background-color: transparent;
    }

    background-color: green; No?

    Likes: Thumb up 0

    pfeiffer stylez customizing
    pfeiffer_stylez Reply:

    Seriously, my IE do it.

    http://i53.tinypic.com/208k0lh.png
    http://i55.tinypic.com/2em2cg8.png

    (Screens with CSS box.)

    I could change it from “li:hover a” to “li a:hover”, but then appears an other problem.

    (Maybe we should continue in the forum, blog comments are a little bit suboptimal for discussions.)

    Likes: Thumb up 0

  8. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  9. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  10. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  11. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  12. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  13. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  14. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  15. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  16. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  17. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  18. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  19. [...] • Navigation Bar [...]

    Likes: Thumb up 0

  20. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

  21. [...] • Top Area • Navigation Bar [...]

    Likes: Thumb up 0

Leave a Reply

You must be logged in to post a comment.