How to Highlight Active Navigation Menu Item?

DannyS-Oracle

Hi guys, I have similar problem to my previous question (How to Highlight Active Link on Navigation Bar?).

How do I highlight the active menu item in Navigation Menu? In the screenshot below the active menu is not highlighted even though I am opening the respective page (Account Support Revenue Impact is not highlighted):

And this is the good working example from Apex's sample application (Sales by Month is highlighted):

I have tried going to the Shared Components > Navigation Menu and set the Current List Entry to "Current Page is Target", just like the sample application; but it didn't work.

Any help will be appreciated! I am using Apex v5.0.3 theme Vita.

Danny

Sven W.

Seems like this is an oracle internal area. So we can not access it.

@Danny please create a showcase in apex.oracle.com.

Also make sure that the "is current" entry exists only for the sub navigation entry and not for the parent navigation entry.

If the same page "is current" for multiple menu entries, only the first one is choosen. So in your case you might want to remove the setting from the parent menu entry.

PMON

Danny,

Making the Current List Entry to "Current Page is Target" should produce your desired results.  To debug the issue you can right click on your active menu item and select inspect item.  It should open up the f12 tools and take you to the html element for your menu item.  You should see that it has a class like the following "a-TreeView-content is-selected is-current"  If it does, then it should be highlighted as expected, or else some other style is overriding the default classes used.  You can browse the other classes applied in the f12 tools console and check on/off attributes in classes to see which on is truly messing with your styling. 

If you want someone to take a closer look at it, please create a sample on apex.oracle.com and provide guest developer credentails.

Hope this helps,

Paul

DannyS-Oracle

Hi Paul, thanks for describing the steps.

Yep as I mentioned, it did not work even though I set the Current List entry attribute to "Current Page is Target". In the inspector, the "is-selected" and "is-current" classes appear on the parent item, but not on the selected page itself.  I did not add any styling, so I doubt there is CSS override.

You can try login to this app https://apex.oraclecorp.com/pls/apex/f?p=27756:20:13026045099771::NO:::

Both username and password are "dev". If you see under each nav-menu item, only "Test Schedule" is highlighted properly - even though the setting for all is the same...

Danny

PMON

can't hit the url

Sven W.

Seems like this is an oracle internal area. So we can not access it.

@Danny please create a showcase in apex.oracle.com.

Also make sure that the "is current" entry exists only for the sub navigation entry and not for the parent navigation entry.

If the same page "is current" for multiple menu entries, only the first one is choosen. So in your case you might want to remove the setting from the parent menu entry.

Mahmoud_Rabie

Hi Danny,

Did you try, for each sublist entry to make its setting:

Current List Entry

- List Entry Current for Pages Type := Colon Delimited Page List

For example if the parent page is 1 and subpage is 2, then put 1:2 as colon delimited page list for current list entry of page 2.

Please take a look at

How to highlight a selected list element

I hope that helps or solves your problem.

Regards

Mahmoud

DannyS-Oracle

Finally got it working.

As Sven mentioned, the "is current" needs to be available at the child entry. So what happened was, every time I generated a new page I also made new navigation entry for the page, and also set the parent page's entry (let's say page 1). I guess the intended use of this was highlighting both the parent (page 1) and active child item (e.g. page 2,3,4) in the UI. But in the real implementation it did not work - so I guess this is a bug from Apex itself?

Each time I made new navigation entry and set its parent, the parent entry's "Current List Entry" was automatically set to "Comma Delimited Page List", and the child page's number would be added there. So for example, my parent page's Current List Entry values were 1,2,3,... This made the child page not getting highlighted, as only the first "is current" will be highlighted.

In the end, I chose to let the parent entry not highlighted, and made the child entry highlighted by removing all the children page number from the parent's Current List Entry (1 ,2,3,...) .

Thanks for taking the time to help me guys, really appreciate it!

Danny