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).

Comments

Popular posts from this blog

Updates on Digicel Trinidad 4G LTE Network

SportFitz is Field Testing Brain Impact Wearable in Trinidad

My First Project on Github - WPF C# Drawing App