Material Design Sidebar Toggle Button

Anvil Q&A
1

So I noticed the other day that in new apps made with the new Material Design layout, the toggle sidebar button is covered up by a solid circle when hovered over rather than being able to see the bars through the circle as some of my older apps behave. Anyone else noticing this? If so and you fixed it, how did you go about doing it? I’ve found a couple of workarounds that are both not very preferable:

  1. In theme.css, add the opacity: 0.2; parameter to the .app-bar a:hover, .app-bar a:active {...} entry. While it does make the toggle sidebar button look more normal, it causes any links you have in the upper nav bar to have reduced opacity when hovered over too.

  2. With the web page running in the browser (I use Chrome), edit the page’s HTML for the second sidebar-toggle object by changing the line class="fa fa-blank" to class="fa fa-bars". This stops the opacity problem mentioned above, but I can’t find a way to do this from inside Anvil.

2

Oops! Thanks for the bug report. The fix to that will go out tomorrow morning.

In the meantime, if you have this problem, go to line 6 of standard-page.html in your Assets and change:

 <a class="sidebar-toggle" anvil-if-slot-empty="top-left-btn"  anvil-if-slot-empty="left-nav" ...>

to

 <a class="sidebar-toggle anvil-designer-only" anvil-if-slot-empty="top-left-btn"  anvil-if-slot-empty="left-nav" ...>

(In case that’s not clear, that’s adding the anvil-designer-only class to the offending element)

1 Like