Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Highlight active category / page item in menus


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Feb 18, 2009, 03:53 AM
vjoseph
 
3 posts · Feb 2009
Highlight active category / page item in menus

Hello,

I'm continuing to discover the power of the Atahualpa theme.

I don't know how to keep highlighted the current active item in the page menu bar. I used a plugin named "PostLists", that creates some placeholders so I can post posts into pages.
Is there a way that the tab related to the parent page, that hosts some posts, keep being highlighted as active when one of these posts is displayed?
I also have the same needs related to the sidebar menu: I used the Wordpress Navigation List Plugin NAVT, and I'd like the active category to remain highlighted when we read one of the posts that are in.

Hope my question is sufficiently clear...

Thanks a lot for your help!

Vincent
  #2  
Old Feb 19, 2009, 06:19 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
Look into the source code to see if the page/category has a class such as current_page_item or current-cat or current-cat-parent and add styles for thos via HTML/CSS Inserts/CSS Inserts

HTML Code:
li.current-cat {
background: #123456;
}
  #3  
Old Mar 8, 2009, 09:28 AM
Tigger
 
35 posts · Feb 2009
Common problem I guess. I have a page menu navigaton in the left sidebar. Integrated with the plugin flexipages. I worked on the theme menu for hours to customize it a bit. Now it looks like I want it to be. Except one point:

How can I arrange it, that the button stays highlighted, as long as the visitor is on that specific page, which belongs to the button ? I get this effect only during hover status. With the page menu bar (horizontal navi) it works. With the vertical navi I just do not get it. When I play around with a:active ... it seems like it is not meant as the "Active Page". Any idea, how to fix that ?
  #4  
Old Mar 8, 2009, 10:15 AM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
You can style this with
HTML Code:
div.flexipages_widget li.current_page_item {
...
}
Wordpress adds

current-cat to current category
and
current_page_item to current page

I added div.flexipages_widget above to limit the CSS to the pages generated by that widget in case you happen to have the same page link in both the widget and the menu bar
  #5  
Old Mar 8, 2009, 11:55 AM
Tigger
 
35 posts · Feb 2009
Hy Flynn

it worked a bit I added:
background: #003399;

The result was, that all main items of the first level had blue background when active. Like I wanted.
But if sub level items under the main level item there, they turned into a blue box together with the main level item, even if not active.

So under the first button I have 2 sub level buttons. When I now click on the first main level button, a big box is spanning around all 3 buttons. No borders in between and the same width all around.

Is it not possible to do it somehow like I did it with the hover status ? a:hover . I played already with a:active ... but no result at all. Seems like the active status is not the correct description for the status, when you are on the page of a button.

If I have to address each item seperately and add code ... let us forget it. Then I will not cutomize it that way ... takes ages.

Greetings

Last edited by Tigger; Mar 8, 2009 at 12:08 PM.
  #6  
Old Mar 8, 2009, 12:11 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
O.k. I have not looked close enough, you're putting the styling on the links, not on the LI. Use this instead (also using the widget's ID now to force overwriting in case it interferes with something else)
HTML Code:
div#flexi-pages-1 li.current_page_item a:link,
div#flexi-pages-1 li.current_page_item a:active,
div#flexi-pages-1 li.current_page_item a:visted,
div#flexi-pages-1 li.current_page_item a:hover {
...
}
About the other LI's borders dissapearing. That should not happen, this targets only the LI with the class current_page_item. There's also only one level of links in that widget as far as I can see, no sub levels (which would have explained this behavior). Perhaps this new CSS fixes that, or otherwise I'd have to see it in action, seems you removed it again.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Both Blog page and Static Front page highlight when Blog page selected lomaprietapottery Page & Category Menu Bars 20 Jul 13, 2012 04:58 PM
[SOLVED] Page Menu Sub Menus of Equal Width Craig Mattice Page & Category Menu Bars 4 Jun 17, 2009 03:46 AM
Customizing category menu bar with different images for every item GeoParadise Page & Category Menu Bars 5 Apr 17, 2009 05:50 PM
Dropdown menus displace the page. zoefriedlander Page & Category Menu Bars 3 Apr 15, 2009 11:41 PM
Page Menu Bar: Last Item on the Right-Hand Margin? PittFunck Page & Category Menu Bars 5 Mar 9, 2009 08:26 AM


All times are GMT -6. The time now is 05:53 AM.


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