change navigation dropdown colors

  • hydroproxy

    (@hydroproxy)


    15 years, 1 month ago

    Hi everyone,

    I am putting the finishing touches on a wordpress site and blog (www.hydroproxy.org) (as far as far as design is concerned). Im currently utilizing the mystique 2.4.1 theme on wordpress 3.1.1. I have been tweaking the navigation menu colors via a “user css” customization. I have looked at several tips on the forum and used them (thank you very very much everyone that helped).

    I am trying to achieve a uniform nav bar but my problem is that once i click on a link that contains a dropdown menu. IE, the H2O2 link. The page loads and when you hover over the link and navigate the drop down menu it is black. If possible, I would like to have the current link look like the rest of the links and dropdown menus when you hover over them.

    Thank you so much if you are able to help me. My CSS experience is extremely limited and much thanks if you can help. If you would like me to provide the custom nav user css output to see how I achieved the current look of the nav menu, let me know.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter hydroproxy

    (@hydroproxy)

    15 years, 1 month ago

    Anybody have any suggestions? This is what the custom user css looks like.

    /* Custom colors for the navigation bar */

    ul.navigation li.active a span.pointer, ul.navigation li.current_page_item a span.pointer, ul.navigation li.current_page_parent a span.pointer, ul.navigation li.current_page_ancestor a span.pointer { display: none; }

    ul.navigation{background-position:left -464px;background-color:#ddd;}
    ul.navigation li{background-position:right bottom;}
    ul.navigation li a{text-shadow:none;color:#397fbf;}

    ul.navigation li.active a, ul.navigation li.current_page_item a, ul.navigation li.current_page_parent a, ul.navigation li.current_page_ancestor a { background:#397fbf; color:#fff; text-shadow:rgba(0,0,0,0.5) 1px 1px 1px; }

    ul.navigation li.active a,
    ul.navigation li.current_page_item a,ul.navigation li.current_page_parent a,ul.navigation li.current_page_ancestor a,
    ul.navigation li.current-cat a,ul.navigation li.current-cat-parent a,ul.navigation li.current-cat-ancestor a{background-position:left -164px;color:#fff;}

    ul.navigation li a:hover,ul.navigation li:hover a,ul.navigation li a.fadeThis span.hover{background-color:rgba (138;43;226) ;} /*(255,255,255,0.1) */
    ul.navigation li:hover li a{background-color:transparent;}
    ul.navigation li li a:hover,ul.navigation li li a.fadeThis span.hover{background-color:#397fbf !important;}

    ul.navigation li.active a span.pointer,
    ul.navigation li.current_page_item a span.pointer,ul.navigation li.current_page_parent a span.pointer,ul.navigation li.current_page_ancestor a

    span.pointer,
    ul.navigation li.current-cat a span.pointer,ul.navigation li.current-cat-parent a span.pointer,ul.navigation li.current-cat-ancestor a span.pointer
    {background-position:center bottom;}

    ul.navigation ul{background-color:rgba(0,0,0,0.66);border-color:#ddd;}

    ul.navigation li.active a:hover, ul#navigation li.active:hover a { background-color:#397fbf;}

    ul.navigation li.active ul,
    ul.navigation li.current_page_item ul,ul.navigation li.current_page_parent ul,ul.navigation li.current_page_ancestor ul,
    ul.navigation li.current-cat ul,ul.navigation li.current-cat-parent ul,ul.navigation li.current-cat-ancestor ul
    {background-color:#ddd;border-color:#ddd;}

    ul.navigation ul ul{border-top:1px solid rgba(255,255,255,0.5) ;}

    ul.navigation{ background:#ddd url(images/nav.png) repeat-x left top; }

    Thread Starter hydroproxy

    (@hydroproxy)

    15 years, 1 month ago

    Has anybody ran into this problem? Well, not a problem but a configuration change.

    Its been about a week since I posted this question. Thanks for any insight.

    Dchidell

    (@dchidell)

    15 years, 1 month ago

    Can you post the link to a site?

    Thread Starter hydroproxy

    (@hydroproxy)

    15 years, 1 month ago

    Hi,
    certainly, http://www.hydroproxy.org. Let me know if I can provide any more information.

    Dchidell

    (@dchidell)

    15 years, 1 month ago

    styles/mystique/style.css

    ul.navigation li.active a:hover, ul.navigation li.active:hover a {
background-color: ENTER YOUR COLOR HERE;

    Let me know if it works.

    Thread Starter hydroproxy

    (@hydroproxy)

    15 years, 1 month ago

    Hey, Im close and its amazing how much better it looks. Thanks for helping me out.

    I want to try and have the transparent black background that can be seen when you hover over any other dropdown list other then the current link that was clicked. I think the code that is currently used for the transparency effect/backgrounds is…

    ul.navigation li a:hover,ul.navigation li:hover a,ul.navigation li a.fadeThis span.hover{background-color:rgba (138;43;226) ;} /*(255,255,255,0.1) */
    ul.navigation li:hover li a{background-color:transparent;}
    ul.navigation li li a:hover,ul.navigation li li a.fadeThis span.hover{background-color:#397fbf !important;}

    Im only basing that code output because it lists “transparent” in the code.

    One thing that I think is minor, is that once I click on a dropdown link, the column and dropdown menu that the dropdown link was under goes solid black.

    Thread Starter hydroproxy

    (@hydroproxy)

    15 years, 1 month ago

    Thanks Dchidell.

    Anyone have any other suggestions for achieving the uniform look?

    Thread Starter hydroproxy

    (@hydroproxy)

    15 years ago

    anybody have any suggestions? I’ve been trying some changes but I am not achieving the uniform look and my CSS is limited. Any help is much appreciated,

    Thanks,

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

The topic ‘change navigation dropdown colors’ is closed to new replies.