Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Styling WP Custom Menu elements (http://forum.bytesforall.com/showthread.php?t=20038)

BluffCityComm Mar 30, 2013 04:20 PM

Styling WP Custom Menu elements
 
1 Attachment(s)
I have positioned the WP custom menu widget in my left sidebar (http://monumentpress.com), and I simply want to style the page links in this menu so that the link for the current page is distinguished by a different color, while the rest of the (inactive) links keep the default link color. I have read the other posts on this forum, regarding custom menu styling, but I cannot figure out how to make this work.

When I try to style this using ATO>HTML/CSS Inserts, it appears my styles are being somehow overwritten by the 'div.widget a:link' attribute. Can someone please guide me with the proper syntax for selecting my links within the custom menu widget, in this instance?

juggledad Mar 30, 2013 05:17 PM

I see no CSS in your CSS inserts that would apply to this area. What is the CSS you are using?
Have you created your CSS selector so it has a higher precedence (ie it is more specific) than other CSS that may apply?

BluffCityComm Mar 30, 2013 06:33 PM

Thanks, juggledad for your quick reply. I just tried again and got it to work with the following code:
Code:

div.menu-services-container ul.menu li.current_page_item a {
color: #750000;
}

It works beautifully, but now I want to do the same thing with the main menu (in the header). I tried using a similar strategy, changing the selectors, etc. accordingly but I'm missing something. Here's the code I've attempted to use:
Code:

div#menu1 ul.clearfix rMenu-hor rMenu li.current-menu-ancestor current-menu-parent a {
color: #750000 !important;
}

I simply want to style the active parent menu item (that is, the top menu item that corresponds to the current page) with a color of #750000. Can you point me in the right direction?

juggledad Mar 30, 2013 07:01 PM

try
HTML Code:

div#menu1 ul.rMenu li.current-menu-item a:link

BluffCityComm Mar 30, 2013 08:45 PM

1 Attachment(s)
Unfortunately, that didn't seem to do it. As you can see in the screen shot attached, the page title for the current page has the appropriate color attribute, but not the top (parent) page menu item.

In the case of the example shown in this screen shot, under the "Services" top-level menu item, the link for the current page ("Book publishing for consultants") has the #750000 color attribute, but the top-level item ("Services") does not. I would like the top-level menu item to keep the #750000 color attribute, to further indicate where the reader is in relation to the site's "top" navigation. I hope that makes sense, but please let me know if I can do anything to help explain.

lmilesw Mar 30, 2013 09:43 PM

I played with this a bit and I think the following should work provided that you use a page hierarchy with pages and sub pages when building the site and use those pages as menu items instead of creating a top level menu with # in the URL field.

HTML Code:

.current-page-parent, .current-menu-item a {
color: #750000 !important;
}


fran330 Sep 24, 2013 08:08 PM

Just dropped by since I'm having the same need about parent item.
THANK YOUUUUUUUUUU, lmilesw :):):)


All times are GMT -6. The time now is 02:30 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.