Editing CSS of custom classes in custom menus

  • Unknown's avatar
    habannah · Member ·

    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: (visible only to logged in users)

  • Unknown's avatar
    marianojmiguel · Member ·

    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:


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

    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:


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

    .rbf2 a {
    color: #f4dc74;
    }

  • Unknown's avatar
    habannah · Member ·

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

  • The topic ‘Editing CSS of custom classes in custom menus’ is closed to new replies.