comment 0

UIKit Collapsible and Toggle Dropdown Menu On Mobile

I rebuilt my professional website from scratch (no template) using the latest UIKit. It got a performance grade of “A 98” and load time of 1.17 seconds when tested on pingdom tools. One of the things I needed to do was make my navbar menu collapse to a toggle dropdown menu on smaller screens. UIKit defines smaller screens as less than 640 px. Below is how I went about getting this done.

I looked at the documentation and the “open test” examples and copied the toggle drop down code from there. This gave me a dropdown with a margin and drop shadow and white background. I needed to change this. I looked in the UIKit css for all references of “uk-navbar-dropdown” and found “uk-navbar-dropdown-dropbar” that removes the margin and shadow. To get a background that matched my navbar I used uk-background-muted.

For the menu to collapse on mobile I had to create a flat menu and a toggle menu and specify visibility for both. For the flat menu I used class=”uk-navbar-nav uk-visible@s” and for the toggle menu I used class=”uk-hidden@s”. Then I wanted to align the menu items to the right using uk-text-right. You can view source on my website to get the source code.

Any questions or comments just message me. It is not that complicated but I did not find this documented exactly anywhere and from my Google searches persons have been asking about this functionality (like here).

comment 0

WASA Mobile App Launched

The Water and Sewage Authority has launched their mobile app. Not surprising the UI is old fashioned and stocky. It does offer some key functions like ordering a water truck supply and reporting a leak on the map. Unfortunately it does not allow me to see my bill details but only a balance due and it is only available on Android at the moment. Personally I prefer to pay all my bills through online banking instead of exposing my credit card details on various websites unnecessarily. I feel like in Trinidad you have to incentivise these things to push it forward quicker e.g. a chance to win a smartphone if you perform a transaction through the app and website. Also, is the WASA app dev team speaking to the TTEC app dev team to learn from each other? I have contacted the WASA app admin to get their input.

Link to WASA’s app here

Please share your thoughts with me as I am working on a review of this app. See my last app review here – Magna Rewards App Review and checkout this report in the Newsday – WASA launches app…easier to pay bills.