Setting SideNavItem background colour when page 'active'

Universal Dashboard
1

Hi all. We’re having a great time here creating a dashboard for monitoring/reporting and self-service!

There’s a minor cosmetic issue which is starting to bug us, mainly due to the number of SideNavItems we have (parents/children and ‘normal’). I have, by trial and error, modified the default theme colours in the relevant Default.psd1 file to get the background colours to change when hovering on the SideNavItems. The question is: how do I get this to stick when clicking on a SideNavItem?

I’ve tried playing with all the .sidenav colours but can’t seem to get anything working.

This would greatly help us with site navigation, as many of our pages contain similar content.

2

Hey @bigtob and a big welcome to the forums. I believe I answered this question the other week here:-

If you would like more advice more than happy to give some further guidence but hopefully this will solve the riddle for you. Peace

1 Like
3

Thanks for the reply @psDevUK

I understand the basics on modifying the theme, which you’ve kindly shared in your reply. My question is more specific: How do I get the sidenav item to stay on a particular background colour once it’s been clicked (and you are viewing that relevant page’s content). None of the .sidenav style declarations in the Default.psd1 file for the theme seem to allow this?

4

Ahhh thanks @bigtob for the clarification…I normally change the title of the main NAV with the title of the page the user is on, but thats just how I roll…I am sure there is a CSS class for selected link…let me have a play and will update the thread accordingly. Peace

1 Like
5

@psDevUK

@bigtob would like to have the active items CSS class from materialize

Example:

<li class="active"><a href="navbar.html">Navbar</a></li>

The Theme configuration for highlighting the collapsible-body active items would be:

'.sidenav .collapsible-body>ul:not(.collapsible)>li.active, .sidenav.sidenav-fixed .collapsible-body>ul:not(.collapsible)>li.active'                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          = @{
        'color' = '#e3000f'
      }

This theme config should update the font color to red if the selected sidnav page is active.

Example from the official materialize page:

image
image296×959 7.51 KB

The problem here ist, the active class is not used in universaldashboard navbar or sidenav.
And since we are currently in the transition to 3.0, I do not know whether it is worthwhile to integrate this ( @adam what do you mean?)

2 Likes
6

Hi @bigtob I did try to get this working last night but failed but reading what @Mordecai has kindly posted seems this may not be possible…

1 Like
7

No worries. Thanks for taking the time to investigate. We’ll implement a workaround for now. Happy Dashboarding!

1 Like