background color of custom menu widget (title/pages)

  • Author
  • #1476765


    I would like to modify the custom menu widget for the side of the page so that I can change its title color and title background color, as well as the background color for the menu links. Is there a CSS rule that I can change to add background colors to the menu widget?

    The blog I need help with is



    Forgive me for possibly not seeing it but what menu widget are you referring to? Or do you not currently have it on the site?

    If you are wanting to target all the custom menus you would use CSS classes targeting the widgets then the menus.

    .widget .menu {
        /* code here */

    or if you want to target specific menus you would use a tool like firebug to help find the specific element’s ID/class like:

    #nav-menu-1 .menu {
        /* code goes here */

    If you want to just use classes and target menus you could use something like:

    .widget_nav_menu .menu {
        /* CSS code */

    Hope that helps a little bit if not don’t hesitate to ask. :)



    Thanks for replying. The menu in question would be on page

    I think the menu is .widget li;

    I thought maybe a light grey bkg would be nice, but then again I like the white space.. so not sure.



    If you choose to go with a grey background make sure that it is a subtle grey that way it won’t deter from the main content of the post.

    For the one you linked it would be something like:

    .nav_menu-4 #menu-sacraments li {
        background-color: #f8f8f8;



    that does not work


    The other items on your left menu show a bold text when they are the current menu item, just not the confirmation page, and I’m not sure exactly why that is happening.

    I tried a few things on that page, so you will see some revisions by me in the revision list, but I reverted everything back to what you had originally.

    I’m working on figuring this out though. Just wanted to let you know. I’m thinking it may be something in the post itself that is causing the issue.

    Hang in there.



    I believe that I somewhere changed that myself–to have all bold text on the left menu… but i forgot where.


    Whoa! I just revisited that particular page, and I now see that “Confirmation” is showing with the bold text style, so I assume you found the issue. I had just gotten back to looking into it.

    If you wish to have a slight grey background to the “current page” items in that menu, you can add the following to the end of your existing CSS and see what you think.

    #menu-sacraments li.current-menu-item {
        background: #EEEEEE;
    #menu-sacraments li {
        padding-bottom: 10px;
        margin-bottom: 0;
        padding-left: 5px;


    That looks great! Thank you very much. I went ahead and applied it also to the other menus I created. It was easy to figure out once I was able to get your help with first one. You do a great service. I will be out of the office the next three days. But when I return to work once again on building this website, I feel blessed to have the support I need from wordpress (as well as, the other members of this forum).


    You are very welcome, and we will be here when you return.

The topic ‘background color of custom menu widget (title/pages)’ is closed to new replies.