We're working remotely and taking on new projects

Mobile navigation styles

With more and more sites becoming “mobile responsive” and changing shape to suit different screen sizes of tablets and smartphones, there are different types of navigation that can be used.

The main menu of a website often needs to change as there is not room for the full menu, and touch enabled devices can’t ‘hover’ over main menu items to show the sub-menus. To solve this, several styles of mobile menu have been created.

Dropdown select menu

mobile navigation select menu

A quick and easy way to alter the menu for mobile is to turn it into a ‘select’ menu. This uses the web browser or operating system’s own type of drop down menu styles. It’s quick to make, but probably won’t match your website styling.

Full width button burger menu, tap to open

mobile navigation burger menu

Here the main menu is hidden until a button is tapped. The button fills the width of the screen. Looks good on small screens, but can take up too much space on large phones or tablets. The icon often used for these menus looks like a burger, hence the name ‘burger menu’!

Small button burger menu, tap to open

mobile navigation burger menu

This can be a better use of space, revealing the menu when a smaller button is tapped.

Off-canvas burger menu tap to open

mobile navigation off-canvas facebook style menu

Based on the Facebook and other app style of navigation, the off-canvas menu moves the entire site over to one side to reveal the navigation menu. These can be tricky to program and can cause performance issues on mobile devices depending on how they are animated, but can look fantastic and allow easier on-screen access to a large menu.

Need a current site upgrading to be mobile friendly or a new responsive website building? Call us on 01636 812 551 and we will talk you through some options!

Need a new website or a redesign?

Call 01636 812 551 or contact us and we'll be glad to help!
We use Google Analytics to see how people use our site. Click here to opt out