WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Color of menu text

[Resolved] Color of menu text

  • I have 2 pages that need to look different in the menu.
    While all my menu elements text is black, I’d need those 2 page menu text to be of different colors.

    Ex. :
    Our(blue) services(red)

    Is there a way to do this with CSS? Can someone help me with this?

    Thank you so much!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Yes do you have a link, or post up the HTML code for your menu, and if possible how are you outputting the menu, manually or using a WP function?

    The basic idea is
    1. Finding or adding a class to these menu items
    2. Adding to your CSS something like:

    .classname {color:blue;}
    .classname2{color:red;}

    Hello xdesi,

    Thinking about it, wouldn’t it be simplier to make the color text an image and simply put the image on the tabs? I don’t know…

    I already created a new page template. So now I guess I would have to change the class of the navbar and add the pic in the style.css?

    I would need help to know how to write that is my page template, what to put instead of

    <ul id="nav">
    			<li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'studiopress'); ?></a></li>
    			<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
    		</ul>

    and also how to add that to my style.css file.

    Thank you so much!

    If you click View Source in your browser on your page, you should see that it adds classes for each item in the list, you can find the class relating to the one you want to change the look of.

    Post up the HTML source of the menu if you are still struggling.

    OK. Here is my code from the header…

    <div id="navbar">
    
    	<div id="navbarleft">
    		<ul id="nav">
    			<li><a href="<?php echo get_option('home'); ?>"><?php _e("Home", 'studiopress'); ?></a></li>
    			<?php wp_list_pages('title_li=&depth=4&sort_column=menu_order'); ?>
    		</ul>
    	</div>

    I created a new navbar-color in my style.css

    I put <div id=”navbar-color”> in a new header that I called header-color

    This hearder is called in the page template this way :

    <?php
    /*
    Template Name: page-withcolors
    */
    ?>
    <?php get_header(); ?>
    
    <div id="content">

    I don’t know how to call the new header instead…

    I am desperate.

    You don’t need to call a new header, the only changes you need to make is to add 2 lines to your CSS stylesheet.

    Add this to it:

    .page-item-2{color:red;}
    .page-item-3{color:blue;}

    Change 2 and 3 to the Page ID’s of the pages you wanted to change the text color for in the menu.

    I did it and unfortunately no change. Would it depend on my theme?

    Do I have to put the 2 css lines to a specific place in my style.css file?

    Oh, and like in my example mentioned above, I need 2 colors per tab. That is why I thought that using an image would be simplier… :

    Ex. :
    Our(blue) services(red)

    xdesi, you will not guess how I succeeded at last in doing this!

    I tried to use HTML in the title page field! And it worked! I personally new some code could work, but I did not know about colors etc. And I did not like the look of the text so, still using HTML, I simply put the code for the image in the title field.

    A joke! :)))) After hours trying to find something much more complicated.

    Anyway thatnk you very much for your help xdesi! 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘[Resolved] Color of menu text’ is closed to new replies.