Jump to content


Photo
- - - - -

Keep Main Nav Item highlighted after change page

main nav menu sidebar

Best Answer Danny , 06 March 2013 - 01:47 PM

OK, if other events from the sidebar menu are also pages, make these pages child pages of the events page, this should resolve the issue.

 

Also, would it be possible for you to provide a link to the site in question please.

Go to the full post


  • Please log in to reply
12 replies to this topic

#1 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 05 March 2013 - 04:39 PM

Hi all!

I'm building a site with a main nav with single items (no dropdown)

 

Consider my nav menu

HOME   EVENTS

 

In EVENTS page, I enter in it and the item events is highlighted, everything OK.

In this page I have a sidebar Menu with a list of events, so my most recent event is the page used in the nav menu for EVENTS item, I mean, when I click on menu item EVENTS i got to the page of my last event!

 

When I change event in the side bar menu, I go to another event page but I would like to keep the EVENTS item of main nav highlighted (has if I hadn't changed page)

 

Is it possible?

 

Thanks

 

Hugo



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 March 2013 - 05:15 PM

You’ll need to use Custom CSS (in Site Options > Custom Code > Custom CSS/LESS). To find the Custom CSS you need, you'll need to use Firebug (or Chrome Development tools). To learn how to use Firebug for CSS customizations, please review this entire documentation and follow the instructions:

Please Login or Register to see this Hidden Content

. For help with the link attribute, please see these instructions:

Please Login or Register to see this Hidden Content

. To be more specific, you need to use the <li> class .current_page_item in your CSS selector so that your CSS change is applied to the current/active page link.



#3 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 06 March 2013 - 12:39 PM

Hi, thanks for your help.

I was trying to do it on style.css of Customize Plugin.

So changes must be done in the Framework directly has you said!

The problem is that I really change page when I click on one item in my side bar menu, and I cannot make reference to the item of my nav bar in order to don't loose highlight.

 

Thanks

 

Hugo



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 March 2013 - 12:50 PM

Hi Hugo,

 

So if I understand you correctly, you have created a menu item called events, is this a page/post/category or a custom post type ?



#5 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 06 March 2013 - 01:01 PM

Hi Danny,

I've created a item in the main nav called EVENTS that is a page.

This page is the last event I have (chronologically)!

 

When I enter in the page (called by the main nav item EVENTS) I have a side bar menu with all the events I have.

Off course the main nav EVENTS is highlighted because I'm in his page, but when I choose another event from side bar menu and change event I loose the main nav item EVENTS highlight because I change page.

I would like to have the main EVENTS highlighted in all my events pages, and not only in the one that references the main menu item EVENTS.

 

I can put all other events pages has child's of my reference page, but I can't still block the main nav for highlight.

 

Thanks

 

Hugo



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 March 2013 - 01:47 PM   Best Answer

OK, if other events from the sidebar menu are also pages, make these pages child pages of the events page, this should resolve the issue.

 

Also, would it be possible for you to provide a link to the site in question please.



#7 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 06 March 2013 - 02:23 PM

I still don't have it online, soon will!

Child pages are not in the main nav, shall I put the there?

 

Or is any css to reference the parent page?

 

Where should I put the css, in the stule.css of customize pluging, or in the Site Options > Custom Code?

 

Thanks



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 March 2013 - 10:15 PM

Hi there,

 

Yes, following what Danny said if you put the child pages into the nav this should resolve the problem for you.

 

You can also set the active state of a menu item using css within a sidebar menu item or within the main nav. You can place that css into the style.css of the customize plugin if that's what you're using, it will still work.



#9 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 07 March 2013 - 06:00 PM

Hi,

I've putted all the events pages has child of my reference page in main nav menu, and I configured the css for .main-nav .current-page-ancestor a  and now I have the expected result, all event pages highlight the EVENTS menu item.

 

This is possible not the best solution, but it works!!

 

Thanks all 



#10 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 March 2013 - 01:24 AM

If it works that's all good :-)

 

Glad you got it working.



#11 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 08 March 2013 - 10:33 AM

Now I'm facing a second issue in the same problem.

The pages of the side bar menu have post loops inside, and when I enter in a single post the menu looses highlight.

I've seen that is because the reference from a post to a page is not native!

Is there any possible way to do it, highlight a menu item from a post?

 

Thanks for your precious help!!

 

Hugo Dias



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 March 2013 - 11:31 AM

Hi Hugo,

 

If the post is configured in the menu as a child item for your page, then it should work like this:

Please Login or Register to see this Hidden Content



On the image above, the Sample Page menu item has the Test Post 3 post set like this, in the Wordpress Custom Menu.

 

Sample Page
    Test Post 3

So it should work automatically.



#13 hugo2808

hugo2808

    Advanced Member

  • Members
  • 42 posts
  • Country: Country Flag

Posted 14 March 2013 - 04:26 PM

Hi,

the post isn't configured in the menu!

I would like to make something like: "highlight a menu item if the post page displayed is from a certain category"!

 

Is it possible??

 

Thanks

 

Hugo







Also tagged with one or more of these keywords: main nav, menu, sidebar