20 Examples of Fullscreen Responsive Menus ![rw-book-cover](https://speckyboy.com/wp-content/uploads/2018/09/full-nav-thumb.jpg) ## Metadata - Author: [[Paul Andrew]] - Full Title: 20 Examples of Fullscreen Responsive Menus - Category: #articles - Summary: We’ve covered responsive navigation a number of times over the last couple of years, from off-canvas reveals and nested accordians, to the simpler <select> drop-down menu system. There really are a multitude of responsive navigation solution out there. - URL: http://speckyboy.com/2014/08/12/fullscreen-responsive-menus/ We’ve covered [responsive navigation](https://speckyboy.com/responsive-navigation-solutions/) a number of times over the last couple of years, from off-canvas reveals and nested accordians, to the simpler `<select>` drop-down menu system. There really are a [multitude of responsive navigation solution](https://speckyboy.com/responsive-navigation-solutions/) out there. Recently though, there has been a new trend emerging, namely the fullscreen responsive menu. Typically [activated by a hamburger button](https://speckyboy.com/analyzing-effectiveness-hamburger-menus-web-design/), the fullscreen menu is in it’s simplest form, an overlay that covers the entirety of the screen giving you lots of space for your menu items. It is typically used by, but not restricted to, sites with limited space as an effective replacement for the mega-menu. [![HTML Templates](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-01.jpg)[HTML Templates](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fsite-templates)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fsite-templates)[![Bootstrap Templates](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-02.jpg)[Bootstrap Templates](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fbootstrap)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fbootstrap)[![Admin Templates](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-03.jpg)[Dashboard Templates](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fadmin-templates)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Fadmin-templates)[![WordPress Themes](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-04.jpg)[WordPress Themes](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fwordpress%2Fthemes)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fwordpress%2Fthemes)[![Email Templates](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-05.jpg)[Newsletter Templates](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Femail-templates)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Fweb-templates%2Femail-templates)[![Web Fonts](https://speckyboy.com/wp-content/uploads/2022/01/env-web-design-06.jpg)[Web Fonts](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Ffonts%2Fproperties-web-font)](https://1.envato.market/c/78798/298927/4662?subId1=web-inspiration&u=https%3A%2F%2Felements.envato.com%2Ffonts%2Fproperties-web-font) If you’re looking for some interactive examples, Codrops has a created a bunch of [fullscreen overlay effects](https://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/) that you can explore, Damon Bauer has created a fullscreen menu plugin for jQuery, and we have also published a tutorial on how to create a [full-width tiled menu with CSS](https://speckyboy.com/full-width-responsive-tiled-menu/). Anyway, below we have found 20 sites that use the fullscreen menu effectively, here they are: #### Examples of Responsive Fullscreen Menus [**Huge →**](https://www.hugeinc.com/) ![Huge fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_02.jpg) **Threadslike →** ![Threadslike fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_03.jpg) [**Square →**](https://squareup.com/us/en) ![Square fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_04.jpg) **Ready Set Rocket →** ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_05.jpg) [**Tictail →**](https://tictail.com/) ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_06.jpg) [**Zaarly Employee Handbook →**](http://handbook.zaarly.com/) ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_07.jpg) [**Reach Partners →**](https://www.reachpartners.ch/en/) ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_08.jpg) [**Brooklyn Bridge Park →**](https://www.brooklynbridgepark.org/) ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_09.jpg) **Pavel Proshin →** ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_10.jpg) **KLM's – Flat or Not →** ![KLM's - Flat or Not fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_01.jpg) [**Plasticbionic →**](https://plasticbionic.com/) ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_12.jpg) [**Southpaw →**](https://www.southpawagency.com/) ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_13.jpg) [**EKWIP →**](http://ekwip.me/) ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_14.jpg) **Rokkan →** ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_15.jpg) **Brad Haynes →** ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_16.jpg) [**Jim Ramsden →**](https://jimramsden.com/) ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_17.jpg) **Teehan+Lax →** ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_18.jpg) **Virgin America Elevate Login →** ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_19.jpg) [**Sports Illustrated →**](https://www.si.com/) ![ fullscreen responsive menu example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_20.jpg) **Not Complex →** ![ fullscreen responsive navigation example site](https://speckyboy.com/wp-content/uploads/2014/08/full_screen_menu_21.jpg), 20 Examples of Fullscreen Responsive Menus, Paul Andrew, 01gnmd0g6txqhc8y8jvt0t2hyt.