Need help? Check out our Support site, then


Editing CSS of custom classes in custom menus

  1. Hi there! There doesn't seem to be much in the forums on this topic, so here goes.

    For the site http://www.rubberbootsfestival.com (Coraline theme), I've created a Secondary Menu in the left sidebar and assigned custom classes to each menu item (the Main Menu is fully integrated with another site, http://www.frcic.com). The custom class of the first level is called rbf2 and the second level is rbf (I know it's in reverse but I realised I needed two classes at a later stage).

    Things are mostly working pretty well, but I'm having a couple of issues.

    1) For every single page/post/archive page, I'd like the Rubber Boots Festival in the Main Menu to be highlighted with a background color. I've got this working for posts, archives, and the home page (which also has a font color), as well as on the rbf2 custom class, but I can't get it to work on the rbf class. This is what I'm using:

    li.rbf.current-page-item #access ul li.menu-item-1611 > a {
    	background-color: #786b5b;
    }

    2) I also want to have a bit more distinction between first level and second level menu items in the Secondary Menu (since, sadly, it's not possible to have a dropdown style here, as far as I've found -- but correct me if I'm wrong!) To accomplish this, I'd simply like rb2 to have a different font color, but for some reason, it's not working. This is the code I've got in there now:

    li.rbf2 > a {
    	background: #786b5b;
    	font-weight: bold;
    	font: #f4dc74;
    	border-top-left-radius: .2em;
    	border-top-right-radius: .2em;
    	border-bottom-right-radius: .2em;
    	border-bottom-left-radius: .2em;
    }
    
    .rbf2 a {
    	font: #f4dc74;
    }

    Thanks ahead of time for the help!

    The blog I need help with is rubberbootsfestival.com.

  2. 1) The main menu has no custom classes applied as far as I can see. It's the left sidebar menu the one that has the "rbf" and "rbf2" classes. Looking at your code, I guess you're trying to highlight the "Rubber Boots Festival" item located on the menu below the header. If that's the case and I got your idea right, this code would solve your problem:

    <br /> #access ul li.menu-item-1611 > a,<br /> #access ul li.menu-item-3133 > a<br /> {<br /> background-color: #786b5b;<br /> }<br />

    Not really sure if I understood what you're trying to do.

    2) All you have to do is replace "font:" with "color:". Like this:

    <br /> li.rbf2 > a {<br /> background: #786b5b;<br /> font-weight: bold;<br /> color: #f4dc74;<br /> border-top-left-radius: .2em;<br /> border-top-right-radius: .2em;<br /> border-bottom-right-radius: .2em;<br /> border-bottom-left-radius: .2em;<br /> }</p> <p>.rbf2 a {<br /> color: #f4dc74;<br /> }<br />

  3. Omg, those were both such simple solutions! Sorry if I wasted your time. Thanks so much for the help!

Topic Closed

This topic has been closed to new replies.

About this Topic