Retaining multiple menu selection colours?

Question

Good day all,

I'm currently trying to navigate an issue where the selected menu option background colour does not retain once you select another menu/button within the selected page. The first menu is within the header and the second is within a views navigation widget within the page. The issue also occurs after initially clicking on a button which navigates to another page (the initial menu selection colour reverts back to the default orange).Please see attached image.

Ideally I'd like to have the two menus maintain their selection colours as the user navigates through.

Are there any solutions for this? Is this a limitation of Experience Builder?

Thank you.

Dave

Multiple Menu Selection Issue.png

DaveStewart1 · Answer

Hi TonghuiMing,

I was able to successfully replicate your case with the double menus maintaining selected colour. One major difference in the flow I have is that I have an intermediate page that uses various buttons (I'm using that similar to a menu) to navigate to the page that would have the views navigator. I think that is the main issue in it not maintaining the selected menu colour. The redirect in the buttons breaks the header menu selection.

I am unable to share this particular app.

Thank you,

Dave

TonghuiMing · Answer

@DaveStewart1

Emm...this does look odd. However, I am not able to reproduce what you've described here - two menus on the same page and the one inside the header shows the same selected state.

Are you on AGOL online or some specific version of the environments? Also, is it possible to share an app with me so we can take a look?

TimWestern · Answer

I remember some oddities when using button select colors a while back to.  As I recall, to get around it, I actually disabled one of them while working on the other part of a wizard, and had separate CSS styles for it.  I suspect in the case of a select, the issue likely has something to do with focus on the element, and that you might need to do some dynamic styling based on it not being (unselected) vs any one or more items selected.

Not sure what that would like like at the moment though.  But Since I think a lot of the controls have select styles only while they have focus, it may be necessary to apply a class to get a certain look that it keeps until a nother in that selection group is selected.