Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

Styling WP Custom Menu elements


  #1  
Old Mar 30, 2013, 04:20 PM
BluffCityComm
 
6 posts · Mar 2011
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?
Attached Thumbnails
Click image for larger version

Name:	MP_sidebar_CustomMenu_link.jpg
Views:	497
Size:	132.1 KB
ID:	2296  
  #2  
Old Mar 30, 2013, 05:17 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 30, 2013, 06:33 PM
BluffCityComm
 
6 posts · Mar 2011
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?
  #4  
Old Mar 30, 2013, 07:01 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try
HTML Code:
div#menu1 ul.rMenu li.current-menu-item a:link
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 30, 2013, 08:45 PM
BluffCityComm
 
6 posts · Mar 2011
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.
Attached Thumbnails
Click image for larger version

Name:	MP_menu_main_services_bookpublishing.jpg
Views:	378
Size:	150.8 KB
ID:	2297  
  #6  
Old Mar 30, 2013, 09:43 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by juggledad; Sep 25, 2013 at 01:38 AM.
  #7  
Old Sep 24, 2013, 08:08 PM
fran330's Avatar
fran330
 
83 posts · Oct 2011
Esneux, Belgium
Just dropped by since I'm having the same need about parent item.
THANK YOUUUUUUUUUU, lmilesw
__________________
My website : Ajwan

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
using elements of atahualpa on custom (out of wordpress) pages drex Atahualpa 3 Wordpress theme 3 Aug 14, 2010 10:49 AM
Styling all the elements of the comment box via CSS inserts perdox808 Comments, trackbacks & pings 7 Jun 14, 2009 02:59 PM


All times are GMT -6. The time now is 11:24 AM.


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