background color of custom menu widget (title/pages)

  • Author
    Posts
  • #1476765

    donka61
    Member

    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 parishconnections.wordpress.com.

    #1476847

    jcasta
    Member

    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. :)

    #1476848

    donka61
    Member

    Thanks for replying. The menu in question would be on page http://parishconnections.wordpress.com/sacraments/confirmation-2/

    I think the menu is .widget ul.menu li;

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

    #1476851

    jcasta
    Member

    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;
    }

    #1476868

    donka61
    Member

    that does not work

    #1476874

    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.

    #1476875

    donka61
    Member

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

    #1476879

    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;
    }
    #1476891

    donka61
    Member

    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).

    #1476892

    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.