Running Time: 05m 43s

 

This video demonstrates the best practice of creating a minimal mobile navbar.

 

NB Click on  in the bottom right of the video to view fullscreen.

 

 

About this video

This video assumes you are already logged into the Sketchanet editor. If you don't know how to do this, you can find out how here. 

 

This is an advanced tutorial, and is specifically for those who want to create a minimal navbar for mobile view.  Sketchanet automatically takes care of how your site responds across different devices, but there are occasionally cases where a few manual tweaks  make things look better on small screens.  We've developed a process to best create a mobile specific header as follows.

 

In the typical scenario of your desktop site's header being comprised of two cells, one for the logo and menu cell for the nav, duplicate this section and make sure the parent's visibilty is set to desktop only.

 

Set the clone to mobile only and delete the cell containing your logo to leave only the menu cell.  Ensure the cell width fills the full width of the grid, ideally by creating a 1 column grid.

 

In the menu settings tab, set the menu to display as an icon only.  This makes it permanently a hamburger icon in menu view.  You may also want to create a different menu setting to the main desktop nav at this stage.

 

Finally create a new cell background by hitting the cell graphics tab.  Upload your logo, center it and set the size to custom by height.  Any value below 99% will ensure none of the logo will be cropped off.  Add padding top and bottom to the cell at your discretion to resize the height of your logo.