WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] Change background color for each main menu button (6 posts)

  1. VictoriaSunrise
    Member
    Posted 11 months ago #

    Hi, can someone help me please?
    I'm using Responsive Theme and i want to change the background color of the main menu buttons(the black-grey one). When i'm changing the CSS style in Child-Theme i can see that the color is changing, but how cand i put a different color for each button/page?

    Example: http://i1281.photobucket.com/albums/a503/mihalachivictoria/Buttons_Color_zps4b107557.jpg

    Thanks!

  2. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    In general, you can use the menu-id class or id to target a specific menu item - look in the HTML using a browser too like Firebug to see what that is.

    For more specific help, we need to see your site.

  3. VictoriaSunrise
    Member
    Posted 11 months ago #

    This is the site: http://phadis.ro/

  4. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    First take this out or fix it - as is, it's invalid CSS:

    .menu .current_page_item a,
    .menu .current-menu-item a {05be00
    	background-color: #;

    Make sure the syntax is correct - it should be:

    .menu .current_page_item a,
    .menu .current-menu-item a {
    	background-color: #05be00;
    }

    To make the buttons different colors per menu item, look at the HTML - for the first one it's:

    <li id="menu-item-191" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-191">
    <a href="http://phadis.ro/patients/">Patients</a>

    So then the CSS would be:

    li#menu-item-191 a {
       background-color: red;
    }
  5. VictoriaSunrise
    Member
    Posted 11 months ago #

    Thank you for your answer!
    I change the button colors, but there is a little problem, the color should appear when the buttons are active, but now they look like they are all active. How can i fix that?
    There should be a connection between this one:

    .menu .current_page_item a,
    .menu .current-menu-item a {
    	background-color: #05be00;
    }

    and this one

    li#menu-item-155 a {
       background-color: #05be00;
    }
  6. VictoriaSunrise
    Member
    Posted 10 months ago #

    I understood how to change the CSS. WPyogi thanks a lot for your help!
    This is the final code.

    li#menu-item-155.current-menu-item a {
       background-color: #05be00;
    }

    Have a great day!

Reply

You must log in to post.

About this Theme

About this Topic