Tania Rascia Web Design and Development

Skip Navigation
Full Screen Navigation Overlay

Full Screen Navigation Overlay

/ 8 responses

One current trend in navigation styles that you may have seen is the full screen navigation overlay. With this type of navigation, toggling the navigation will overlay the menu across the entire screen. Codrops did a really nice set of demos with full screen overlay styles last year. I wanted to demonstrate a very simple version of the overlay using jQuery. Of course, it’s responsive as well, and you can view the demo on CodePen.

HTML

The HTML is easy. I have all of my content in a main wrapper, and my navigation in an aside. The navigation is a normal unordered list.

<aside>
  <div class="outer-close toggle-overlay">
    <a class="close"><span></span></a>
  </div>
  <nav>
    <ul>
      <li><a href="#!">Features</a></li>
      <li><a href="#!">Pricing</a></li>
      <li><a href="#!">Documentation</a></li>
      <li><a href="#!">About</a></li>
    </ul>
  </nav>
</aside>

For now, everything is visible, but we’ll be using CSS and jQuery to hide and show the menu.

jQuery

The jQuery is even easier. As always, I prefer to define and call jQuery, and wrap the rest of my code within.

(function($) {
  $(function() {
  // The rest of the code
  });
})(jQuery);

After that, I’ll just be adding a click event to the toggle-overlay class, which will toggle open on the aside.

(function($) {
  $(function() {
    $('.toggle-overlay').click(function() {
      $('aside').toggleClass('open');
    });
  });
})(jQuery);

CSS/SCSS

There’s a bit more to the CSS, but the basic functionality is simple enough. This next line of CSS is all you need to make the code function, and from there you can add your own styles.

aside {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(200deg, #27156E, #6A2A88, #9F4981);
	transition: all .5s ease;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
}
.open {
	opacity: 1;
	visibility: visible;
}

My navigation is in the aside, but you can just as easily put it in a div, section, or whatever you want. Since I want it to take up the whole screen, I’m making it fixed with a width and height of 100%. Setting the top and left positions to 0 ensures that it takes up the whole space.

The background was my choice of a linear-gradient, but of course you can use anything. I’ve set a smooth transition, and a z-index of 2 to ensure that the content of the aside is always on top.

The next two lines are the only that change between states. aside is set to visibility: hidden and opacity: 0, and when the open class is applied, it becomes visible with full opacity.

Demo

Here is the demo of the code, with additional styles applied.

See the Pen yYrXRG by Tania (@taniarascia) on CodePen.

Additional Styles

Close button

The close button is fixed, with a z-index of 3, just to ensure it always appears above the overlay. The span setup is the same as from the responsive dropdown navigation bar tutorial, except it’s not animated. I find this method easier than loading a font icon set or using a unicode letter.

I’m using SCSS for these stylings, as nesting makes the code a lot more manageable.

.close {
	position: fixed;
	top: 40px;
	right: 60px;
	color: white;
	z-index: 3;
	cursor: pointer;
	font-family: sans-serif;
  span,
  span:before,
  span:after {
    border-radius: 4px;
    height: 5px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  span {
    background: transparent;
  }
  span:before {
  transform: rotate(45deg);
  }
  span:after {
  transform: rotate(-45deg);
  }
}

Unordered list menu using flexbox

To ensure that my menu looks good no matter the size of the viewport, I’m using the flex property. The nav tag is my flex container.

I declare a flex container with display: flex. By setting the flex-direction to column, I’m ensuring that the content is stacking vertically. justify-content will ensure that anything nested inside of the flex container will be vertically aligned. I’ve set the height to 95vh, which is 95% of the viewport height.

nav {
	text-align: center;
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;

Any time you use an unordered list for a menu, you’ll be removing the list-style and extra space.

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

The lis inside the navigation are the nested flex items. I’ve set them to have a line-height of 20vh to ensure they’re centered vertically. I set it to 95/20 instead of 100/25 to give a little extra room.


		li {
			align-items: center;
			flex: 1;
			line-height: 20vh;

The a is a block-level element, with a transition. I’ve set the font-size to 1.5em for mobile, but also added a min-width media query to increase the font size on desktop.

		a {
        font-size: 1.5em;
				transition: all 0.5s ease;
				display: block;
				text-decoration: none;
				color: rgba(255, 255, 255, .5);

The final bit of code I have adds an animated underline to the a elements. This effect is inspired by Tobias Ahlin‘s “Animating Link Underlines” article. Here’s the completed menu code.

nav {
	text-align: center;
	height: 95vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
		li {
			align-items: center;
			flex: 1;
			line-height: 20vh;
			a {
        font-size: 1.5em;
				transition: all 0.5s ease;
				display: block;
				text-decoration: none;
				color: rgba(255, 255, 255, .5);
				&:hover {
					color: rgba(255, 255, 255, .9);
					transform: scale(1.1);
					&:before {
						visibility: visible;
						transform: scaleX(1);
					}
				}
				&:before {
					content: "";
					position: absolute;
					width: 50%;
					height: 2px;
					bottom: 0;
					left: 25%;
					background: white;
					visibility: hidden;
					transform: scaleX(0);
					transition: all 0.3s ease-in-out 0s;
				}
			}
		}
	}
}
@media screen and (min-width: 600px) {
  nav ul li a {
    font-size: 3em;
  }
}

In order to ensure the span is large enough to register a click event on mobile, we also have to use the outer-close class to create a larger area.

.outer-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    height: 85px;
    cursor: pointer;
}

I hope this simple bit of code inspires some possibilities for creative full screen overlay styles for you.

View demo

The Author

Thank you for reading! I'm Tania Rascia, and I write no-nonsense guides for designers and developers. If my content has been valuable to you, please help me keep the site ad-free and continuously updated with quality tutorials and material by making a donation. Any amount helps and is greatly appreciated!

Write a response

Your email address will not be published.

Discussion

  • Alex Martin says:

    really cool Tania. I’d like to know what can I do for closing overlay after clicking my choice if that choice is an anchor link to the same page. I made several ‘section’ as a full page and menu do nothing after click by now….. Any tips ?

  • Akshay vinchurkar says:

    For this type of simple thing i thing using jquery is to much you can directly write
    aside.classList.toggle
    By selecting that with queryselector this is just thought

  • Mateo Stabio says:

    Very nice, just one thing. It wasn’t centering it in ipad safary and desktop safary, not sure if it’s because of the Safari version, but what I added to fix it.

    nav {
        display: -webkit-box;
        /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;
        /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;
        /* TWEENER - IE 10 */
        display: -webkit-flex;
        -webkit-box-align: center;
        -webkit-flex-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
  • Dalton says:

    The toggle button in the demo isn’t working for me in iOS. Anyone else having this problem?

    • Tania says:

      I’ll look into this and let you know what the issue/solution is.

    • Tania says:

      Alright, looks like the issue was due to the span being too small to register the tap event on a phone. I solved this by creating this class:

      .outer-close {
          position: absolute;
          right: 0;
          top: 0;
          width: 85px;
          height: 85px;
          cursor: pointer;
      }

      And wrapping the span toggle in it.

        <div class="outer-close toggle-overlay">
          <a class="close"><span></span></a>
        </div>

      Hope that helps! I’ll update the article as well.

      • Dean says:

        Hi Tania,

        I like this effect you have done but how would I customise it so that this overlay effect only appears on mobiles and tablets but for small and large desktop users I get a horizontal list of inline links flush right with the screen.

      • Tania says:

        You would just make another media query for desktop and stylize your menu accordingly.

Tania's List

My tutorials, guides, and articles for web designers, developers, and autodidacts, sent out once a month or so. No bullshit, ads, or tricks.