Change font color submenu...?

resolved (19 posts) (5 voices)

  1. creal


    I want to change the font color in the slide/submenus It's too light for me, i'd like to have it a bit darker. I can't find the color in the css's. I'm using style.css and primary_red.css?

    Thanks a lot for the help!

    Posted 3 years ago #
  2. Elliott

    Hello creal,

    Add these lines in /wp-content/themes/awake/style.css..

    .slider_content { color: black !important; }
    .menu-item a { color: black !important; }

    This changes the color to black, you can also change the sizing with this font-size: 18px; if you wish.

    Posted 3 years ago #
  3. creal

    Hi Elliot,

    thanks for the quick reply, but I don't see any changes. You can see where I've added the lines in the screenshot. I just need a darker text color for the submenu.

    Maybe I'm doing something wrong here.



    1. screen.png (74.7 KB, 13 downloads) 3 years old
    Posted 3 years ago #
  4. Elliott

    Hmm, that should be working. If possible can you give me a link to your page?

    Posted 3 years ago #
  5. Elliott

    Try adding this,

    .page_item a { color: black !important; }

    I think your using WP 3.0 menu's and the classes are different from regular. Btw, I took a look at your site and could not find any sliders. Did you say you wanted the text changed on them also?

    Posted 3 years ago #
  6. creal

    Basically i just want the submenu text the same color as the content text in my pages/posts (which is a bit darker).

    I'll try your page item and yes I'm using wp 3.0 menu's.


    Posted 3 years ago #
  7. creal

    No Succes, sorry. This is changing the color of my submenu AND my top menu. The white I have in the top is perfect I just need to darken the color of the submenu.

    Do you know how?


    Posted 3 years ago #
  8. Elliott

    Try this..

    .children li a { color: black !important; }

    Let us know if it works for you.

    Posted 3 years ago #
  9. creal

    YEAH!!!! THANKS! :D

    Posted 3 years ago #
  10. I am not sure what I am doing wrong but I need help with the same issue.

    I need the top nav to be white and the sub-child-links to be darker. I have followed your instructions but no luck. I have added the two lines on the bottom of the dropdown section as demonstrated below:

    /* ------- 2. Dropdowns ------- */
    .jqueryslidemenu ul li ul{ position: absolute; left: 0px; display: block; visibility: hidden; }
    .jqueryslidemenu ul li ul li{ display: list-item; float: none; }
    .jqueryslidemenu ul li ul li ul{ top:0px; }
    .jqueryslidemenu ul li ul li a{ width: 200px; padding: 6px 16px; margin: 0; }
    .jqueryslidemenu ul ul li a, .jqueryslidemenu ul ul li a:link, .jqueryslidemenu ul ul li a:visited { height:100%; line-height:20px; }
    .jqueryslidemenu ul li ul li a:hover, .jqueryslidemenu ul ul li a:hover{ margin:0 4px; padding:6px 10px; }

    /* sub level link styles */
    .jqueryslidemenu ul ul li a, .jqueryslidemenu ul ul li a:link, .jqueryslidemenu ul ul li a:visited{
    text-shadow:0 1px 1px #fff;}
    /* sub level hover styles */
    .jqueryslidemenu ul li ul li a:hover, .jqueryslidemenu ul ul li a:hover{
    background:url(styles/_shared/opacity_strip.png) repeat-x scroll 0 4% transparent;
    .jqueryslidemenu ul ul{
    background: #ffffff;
    border-top:1px solid #fff;}
    .jqueryslidemenu ul ul ul{margin-top:-5px;}
    .menu-item a { color: white !important; }
    .children li a { color: black !important; }

    but no luck yet. Here is the link to the site I am referring to

    Please help!

    Posted 3 years ago #
  11. Hi nabeelahmed,
    change the last 2 lines from this:

    .menu-item a { color: white !important; }
    .children li a { color: black !important; }

    to this:

    .menu-item a { color: white !important; }
    .menu-item li a { color: black !important; }
    Posted 3 years ago #
  12. Works great! Thank you!

    Posted 3 years ago #
  13. jofoco4

    May I reopen this question? The layout of style.css has probably changed (I'm working with WP 3.3, Awake 2.4),
    I would simply like to darken the font in the submenus off the main menu across the top. Right now the letters are a very light grey etched appearance on a white background. I've reviewed the entire Style.css file, and don't find any evidence of the references in previous posts (below is the section of Style.css for the section where I thought I would find these references, headed "Menu"). I have reviewed the story-coach website indicated previously, and the darkened characters in the submenus for that site are exactly what I'm looking for.

    Many thanks for whatever assistance you can provide!


    03. MENU
    =============================================================================================================== */

    #primary_menu{height:60px;letter-spacing:1px;text-transform:uppercase;margin:0 auto;width:980px;padding-top:0;}
    .jqueryslidemenu ul{margin:0;padding:0;list-style-type:none;}
    .jqueryslidemenu li{position:relative;display:inline;float:left;margin:0;list-style:none;}
    .jqueryslidemenu li a{display:block;text-decoration:none;height:36px;line-height:36px;overflow:hidden;padding:0 16px;height:60px;line-height:60px;}
    .jqueryslidemenu>ul>li>a:hover,.jqueryslidemenu>ul>li:hover>a{background:url(images/menu_hover.png) no-repeat center -4px;}
    .jqueryslidemenu ul ul{position:absolute;left:0px;display:block;visibility:hidden;padding-top:4px;top:30px;padding-bottom:4px;border-top:1px solid #fff;}
    .jqueryslidemenu ul ul ul{margin-top:-5px;z-index:2001;}
    .jqueryslidemenu li li{display:list-item;float:none;}
    .jqueryslidemenu li li a{width:200px;padding:6px 16px;margin:0;height:100%;line-height:20px;color:#aaa;text-shadow:0 1px 1px #fff;}
    .jqueryslidemenu li li a:hover{margin:0 4px;padding:6px 10px;background:url(images/opacity_strip.png) repeat-x 0 4%;color:#888;padding-left:12px;}
    .jqueryslidemenu small{display:none;}

    /* Fancy Search
    -------------------------------------------------------------- */
    #fancy_search a{z-index:2002;background:url(images/search.png) no-repeat center center;cursor:pointer;height:40px;right:30px;position:absolute;top:13px;width:60px;text-indent:-9999em;}
    #cluetip.search_tooltip{background:url(images/search_tooltip.png) no-repeat!important;border:0!important;width:230px!important;height:80px;}
    .search_tooltip #s{font-size:11px;padding:11px 15px;width:150px;z-index:2002;}
    .search_tooltip #s,.search_tooltip #s:focus{background:none;border:none;}

    =============================================================================================================== */

    Posted 2 years ago #
  14. Elliott

    Hello jofoco4,

    Add this in Dashboard -> your theme -> General Settings -> Custom CSS,

    .jqueryslidemenu .sub-menu a { color: black !important; }

    Posted 2 years ago #
  15. jofoco4

    Thanks Elliott, but no luck. No change in the appearance with the addition of that syntax in the Custom CSS field.

    The site is There's only one trigger for a submenu, under "About".

    Thanks again for your help with this. I DO appreciate your time.


    Posted 2 years ago #
  16. Elliott

    It looks like your using the default menus. Try this instead,

    .jqueryslidemenu li li a { color: black !important; }

    Posted 2 years ago #
  17. jofoco4

    Still no luck. I'm adding that line to the Custom CSS box, right?

    Sorry about so many questions about a very small detail. Should I just forget about it?



    Posted 2 years ago #
  18. Elliott

    Yes the custom CSS section. It looks like your pasting it in the custom Javascript section instead.

    Posted 2 years ago #
  19. jofoco4

    AAAAaahhhhhh. Sorry to trouble you with my difficulty following directions!

    That did it. Many thanks!


    Posted 2 years ago #


You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme