WordPress.com

1. habannah
   Member
   Jan 17, 2013, 7:59 PM

   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. marianojmiguel
   Member
   Jan 17, 2013, 11:35 PM

   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. habannah
   Member
   Jan 17, 2013, 11:55 PM

   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.