highlight Auto Nav current page and parent pages.

Permalink 9 users found helpful
Tutorial and solution.

For a long time i have been trying to get the autonav to have nav selected (the current page) different colour - rather than just a gery outline.

Also it would be nice if when your on a sub page it highlited the relevent parent so you know what nav path you are in.
see demo -http://www.test.ecomatt.com

There are a number of posts on this topic but non of them really worked. as the view.php script and any modifications that iv seen took into consideration that the Home page by default is the parent to all pages - thus always being highlighted if you wanted the nav path to be highlighted.

solution: edit the view.php and the template > header-nav.php to allow nav-selected and nav-path-selected but negate (ignore) the home page unless it is the current selected. This solved the issue of the home page always being highlighted when on any other page.

the code:
with thanks to my colleague Russ Curgenven for helping with this.

edit the view.php
here is the full php code

<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
   $nh = Loader::helper('navigation');
   //this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{


you will then need to edit the css of your theme to get your desired selected and nav path selected colour eg

.nav-path-selected{
color:#fa8f04 !important;
}

and somthing like
#page #central #sidebar ul.nav a.nav-selected {font-weight: bold; color: #fa2516 !important;}
if you want the active page to be a different colour to your nav path highlited pages.


now the header_menu.php
i have added a couples of things in this one to get it working such as adding the array of parent cIDs so just copy past the whole code.
<?php 
   defined('C5_EXECUTE') or die(_("Access Denied."));
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   echo("<ul class=\"nav-header\">");
   $nh = Loader::helper('navigation');
//this will create an array of parent cIDs 
   $inspectC=$c;
   $selectedPathCIDs=array( $inspectC->getCollectionID() );
   $parentCIDnotZero=true;   
   while($parentCIDnotZero){
      $cParentID=$inspectC->cParentID;
      if(!intval($cParentID)){
         $parentCIDnotZero=false;
      }else{


and so this is your themes css to get the highlited coloring. best make it the same as the sidebar colour for consistancy.

#page #header ul.nav-header li.nav-selected a { color:#fa2516 !important;}

finally just to say this works and is the only solution so far iv seen that does, if you have easier and cleaner ways of achieving this then please post them here.
also why is this not an option in the auto nav by default? its something that nearly every client of mine has asked for.
i hope you find this helpfull.
let me know if you have any problems.

And if someone can post instruction on adding the css to the auto nav template folders so that users dont need to edit the main theme css that would be nice.
Regards
Matthew

PS make a copy of your autonav block and place in root/blocks/autonav so as not to edit the original block which is located root/concrete/blocks/autonav

ecomatt
View Replies:
ld13 replied on at Permalink Reply
ld13
Wow!!! I cannot believe someone finally came with a solution for this. Thank you so much for sharing ecomatt:) It works perfectly!
ld13 replied on at Permalink Reply
ld13
Actually, I have had the same problem with the page list block. I need the link for the current page to remain highlighted.

By any chance have you come across a solution for this?
digievo replied on at Permalink Reply
digievo
Thanks also for this solution.
chassa2556 replied on at Permalink Reply
chassa2556
Hi - I agree this should be much simpler and easier to implement with Concrete5. I'm having problems in that there is a gallery on the home page which has sub navs on the left column that feed from a hidden folder that are a folder deeper. The top nav refuses to stay highlighted. Any ideas anyone please..

http://www.redback-client.net/smiths/...
ecomatt replied on at Permalink Reply
ecomatt
did you get this sorted?
following the instructions above will get this to work...
did you need help?
ecomatt replied on at Permalink Reply
ecomatt
im sure if i had a look at it we could figure something out, iv been very busy and havant had a chance to look at it yet
makeway replied on at Permalink Reply
makeway
Thank you, thank you, thank you!
bcarone replied on at Permalink Reply
bcarone
Ecomatt thanks

I think you should write this up and submit it as a "HOW TO" to the documentation efforts.

A screen cast would be cool too ;)

Bill
invision replied on at Permalink Reply
invision
Matthew,

Rather than use the php file header_menu.php, create a folder to contain the php file in blocks/autonav/new_menu/ then move the header_menu.php file into that folder and rename to view.php.

Include any styles in a file named view.css (rather than editing main.css in your theme) and C5 will automatically pick them up.

You'll have to select the new custom template and apply it to the nav block.
Mnkras replied on at Permalink Reply
Mnkras
the current autonav generates the following classes:

nav-selected (current page)
nav-path-selected (parent pages of the selected page have this)
screame1 replied on at Permalink Reply
Yes, with the autonav just add this style to your CSS:

a.nav-selected { color: #000000; }


Simple as that. I see no need to edit any PHP scripts :)

-Andrew
ppisoban replied on at Permalink Reply
ppisoban
This snippet of code didn't work for me. I had to use
li a.nav-selected { color: #fff!important; }
The code didn't work till I put in the !important bit. However now it works perfectly! Thanks for getting me on the right track.
fjhadd replied on at Permalink Reply
fjhadd
This and it work for me:
Using this on the css for the header navigation
#navigation ul { }
#navigation li { }
#navigation li a { }
#navigation li a:hover { }
#navigation li a.nav-selected {"selected css for the rest" }
#navigation ul li.nav-selected:first-child a.nav-selected {"selected state css {"base state css (this is for home or first link)"}
#navigation ul li:first-child a.nav-path-selected {"base state css (this is for home or first link)"}
#navigation li a.nav-path-selected {"parent selected css"}


sample:http://www.haddockdesign.com/ice/index.php/nosotros/historia/...
tlcbook replied on at Permalink Reply
Thanks fjhadd - that was very helpful: exactly what I needed
zoinks replied on at Permalink Reply
This thread is da bomb!

Thank you thank you thank you...

Should be incorporated into the core, no?
Dinamicore replied on at Permalink Reply
Dinamicore
Hi: working for chrome and ff, can´t make it work for other browsers? Please advice.http://www.semaica.com/concrete5/index.php/espanol/contacto/...
zoinks replied on at Permalink Reply
It is working in Safari, too. It's not a CSS thing, so I think it should really work across the board. You are just talking about the buttons on the right? They highlight as blue. I don't see any child pages on your site, though. But, the nav-selected of the parent seems to be working.
jamesleech replied on at Permalink Reply
jamesleech
I've implemented this aproach in a site based on the Minified theme and have one sticky question.

Is there a line of code I should tweak to prevent the Home page from remaining highlighted?


http://www.barronriver.org/about-us/partners/...


Is a demo showing the conundrum of dual highlighting.

Cheerio, James
zoinks replied on at Permalink Reply
Did you read the first post? He addressed this issue and gives the code to fix it.
pmlmedia replied on at Permalink Reply
pmlmedia
Thanks for Posting - works great.
theneptune replied on at Permalink Reply
theneptune
Thank you so much. Its really helpful