DEV Community: Gautam Tiwari

How to make a responsive hamburger menu using CSS only?

Gautam Tiwari — Sat, 26 Jun 2021 13:14:32 +0000

Hey everyone ✌. I am Gautam Tiwari, a front-end developer and... let's get started.

Tip: Follow along with me in this tutorial

Why do we need a responsive menu?

THE MAJORITY OF USERS USE MOBILE PHONES.

Here are few facts to prove that:

Over one year, mobile users share increased by over 10%.
As of 2020, here is the global breakdown of internet traffic: 50.88% mobile, 46.39% desktop, 2.74% tablet

If that's not enough, you can check the global mobile traffic data below:

Source: https://bit.ly/3xUVMhp

Final Result

The main goal here is to help you out with the hamburger menu for the mobile version.

Here's what we will be building in this tutorial:

Did you notice the glass morphism effect on the menu? We will be doing that too!

The Markup (with explanation)

Let's set up the HTML for the nav and the menu.

<nav class="nav">
  <a href="#" class="nav__logo">CompanyLogo</a>

  <!-- focus on this div -->
  <div class="nav__menucontainer">
    <div class="nav__listcontainer" tabindex="0">
      <ul class="nav__menu" id="navmenu">
        <li class="nav__item">
          <a href="#" class="nav__link">About</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Projects</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Contact</a>
        </li>
        <li class="nav__item">
          <a href="#" class="nav__link">Blog</a>
        </li>
      </ul>
      <a id="hamburger" href="#navmenu" title="menu" class="nav__hamburger">
        <i class="fa fa-2x fa-hamburger"></i>
      </a>
    </div>
    <a href="#!" title="close menu" class="nav__hamburgerclose"><i class="fa fa-2x fa-times-circle"></i></a>
  </div>

</nav>

Just copy-paste this code (or type it if you an absolute beginner), as its explanation is given below.

Apologies for any semantical mistake and somewhat long class name.

Let's understand what we did and why we did it.

We have a nav element for our fixed navbar on top of our page.
The <nav> element has two child elements:
1. We have a <a> tag for the company logo to be placed.
2. The second child of nav, is our container (<div class="nav__menucontainer">) for the menu.
The menu container have two childs:
1. <div class="nav__listcontainer" tabindex="0"> to contain the menu list and the hamburger icon
2. <a id="hamburger" href="#navmenu" title="menu" class="nav__hamburger"> to toggle open state for the menu
Last element to consider is the adjacent sibling of our list container. It is the close icon to toggle close state for the menu

NOTE: Do not forget the tabindex="0" on <div class="nav__listcontainer">

Stylesheet (with explanation)

Now, let's take a look at the CSS styles:

/* most part is for styling, and you can safely ignore it */
/* comments are placed wherever necessary */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  margin: 0;
  font-family: sans-serif;
}

a {
  text-decoration: none;
}

/* --- You will know what this is --- */
#blobSvg {
  max-width: 520px;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.85);
  color: #efefef;
  z-index: 5;
  padding: 1rem;
}

.nav__logo {
  text-decoration: none;
  color: inherit;
  font-weight: 700;
  font-size: 1.5rem;
}

.nav__menucontainer {
  position: relative;
}

.nav__hamburger {
  color: inherit;
  min-width: 32px;
  min-height: 32px;
  transition: opacity 80ms linear;
  /* hiding the hamburger icon on large screen sizes */
  display: none;
  opacity: 0;
}

.nav__hamburgerclose {
  color: inherit;
  position: absolute;
  top: 0;
  min-width: 32px;
  min-height: 32px;
  transition: opacity 150ms linear;
  /*   hiding the close icon and... */
  display: none;
  opacity: 0;
  z-index: -1; /* pushing it behind the hamburger icon so that hamburger icon can be clicked */
}

.nav__menu {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 0.95rem;
  font-weight: 500;
}

.nav__item {
  margin-right: 1rem;
}

.nav__link {
  color: inherit;
  text-decoration: none;
  width: 100%;
}

.nav__link:hover,
.nav__link:focus-visible {
  box-shadow: 0 4px 0 -1px #a2e718;
}

This was for the desktop version of our menu. It works for large screen sizes. So, now let's make it responsive with a media query.

Stylesheet (for small screen sizes)

Have a look:

/* ----- smaller screen sizes ----- */
@media (max-width: 520px) {
  .nav__hamburger {
    /* making the hamburger icon visible on smaller screen sizes */
    display: flex;
    opacity: 1;
  }

  .nav__menu {
    /* move menu offscreen */
    opacity: 0;
    position: fixed;
    visibility: none;
    top: -1000px;

    /* just some styles */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #25310c;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.19);
    border: 2px solid rgba(255, 255, 255, 0.2); /* part of glass morphism effect */
    border-radius: 2rem 0 2rem 2rem;
    background: rgba(255, 255, 255, 1);
  }

  /* uncomment the line below to activate on hover. */
  /*   .nav__listcontainer:hover .nav__menu, */
  .nav__listcontainer:focus .nav__menu,
  .nav__listcontainer:focus-within .nav__menu {
    position: absolute;
    visibility: visible;
    opacity: 1;
    top: 2rem;
    right: 1.5rem;
  }

  /*   if the browser supports backdrop-filter property, 
  then add it (for the glass morphism effect) */
  @supports (backdrop-filter: blur(10px)) {
    /* uncomment the line below to activate on hover. */
    /*     .nav__listcontainer:hover .nav__menu, */
    .nav__listcontainer:focus .nav__menu,
    .nav__listcontainer:focus-within .nav__menu {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(10px);
    }
  }

  .nav__item {
    margin-right: 0;
    padding: 0.5rem 1.5rem;
  }

  .nav__link:hover,
  .nav__link:focus {
    opacity: 0.8;
    color: #121212;
  }

  /*  uncomment the line below to activate on hover. */
  /* NOTE: Hover is not recommended, it will have side effects on this */
  /*   .nav__listcontainer:hover .nav__hamburger, */
  .nav__listcontainer:focus .nav__hamburger,
  .nav__listcontainer:focus-within .nav__hamburger {
    opacity: 0;
    z-index: -1;
  }

  /* uncomment the line below to activate on hover. */
  /* NOTE: Hover is not recommended, it will have side effects on this */
  /*   .nav__listcontainer:hover + .nav__hamburgerclose, */
  .nav__listcontainer:focus + .nav__hamburgerclose,
  .nav__listcontainer:focus-within + .nav__hamburgerclose {
    display: flex;
    opacity: 1;
    z-index: 1;
  }
}

Slow down...Slow down. I know it looks like a lot, but you should know that it was written in SCSS, and then the compiled CSS is used for a beginner-friendly explanation.

Tip: Copy-paste all these styles

So what's happening here?

Of course, there is a lot that's happening there, but as the first comment says, you can safely ignore most of it.

As I said in the beginning, we'll focus on the mobile part.

So, let's start from here: @media (max-width: 520px) {

Choose a breakpoint suitable for your menu size
Initially, we had our hamburger and close icon hidden on large screen sizes display: none; opacity: 0;. But on small screen size, we want to see the hamburger icon. So, we did this: display: flex; opacity: 1;
Next, we moved the menu list (<ul>) off the screen so that we don't click on it mistakenly. Try inspecting <ul> without these (opacity: 0; position: fixed; visibility: none; top: -1000px;) styles for better understanding of what I am saying.
Now, the crucial part for the functionality:
- .nav__listcontainer:focus .nav__menu, .nav__listcontainer:focus-within .nav__menu {: This selector says, whenever the listcontainer has focus or if any element within this element has focus, then do some styling for .nav__menu. We are just displaying the .nav__menu that we moved offscreen before.
- Skiping to .nav__listcontainer:focus .nav__hamburger, .nav__listcontainer:focus-within .nav__hamburger { selector: This selector also says, whenever the listcontainer has focus or if any element within this element has focus, then do some styling for .nav__hamburger. We are hiding hamburger icon here.
- Now, hopefully, you can tell what the succeeding selector does. Yes, you are right about it. It displays the close icon and brings it in front using z-index: 1; so that it can be clicked.
@supports (backdrop-filter: blur(10px)) {: This (@supports (...)) rule checks if the property inside the parenthesis () is supported by the browser. If it is supported, then apply the styles inside it. Here we add a partially white background and add a slightly blurry effect for the GLASS MORPHISM EFFECT.
Now, only .nav_item and .nav_item:hover, .nav:focus are left. You can ignore them as they are just adding some styling it them.
Wait... there is one more selector left, #blobSvg. To get this element, go to blobs.app make a blob that you like and copy-paste the SVG code inside the .container like so:

<nav>
   ...
</nav>

<div class="container">
  <!--   svg is placed to see the glass morphism effect -->
  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" id="blobSvg">
    <defs>
      <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color: rgb(255, 95, 109);"></stop>
        <stop offset="100%" style="stop-color: rgb(255, 195, 113);"></stop>
      </linearGradient>
    </defs>
    <path id="blob" d="M365,286Q374,322,337.5,330.5Q301,339,275.5,410.5Q250,482,221.5,415Q193,348,154.5,337.5Q116,327,82,288.5Q48,
                       250,57,197Q66,144,98,93.5Q130,43,190,76Q250,109,304,86Q358,63,361,123.5Q364,184,360,217Q356,250,365,286Z" fill="url(#gradient)"></path>
  </svg>
</div>

Then, paste the styles for <div class="container"> given below at the end (or somewhere at the top):

.container {
  display: flex;
  flex-direction: column;
  align-items: center; /* centering elements inside .container */
  width: 100%;
  max-width: 720px;
  margin: 0 auto; /* centering container within its parent */
  padding: 2em 1.5em;
  background: #fff;
}

That's it! Check the responsiveness and the glass morphism effect that you just built with me.

If you face any problem following along, then check the Codepen for this below or ping me on Linkedin or Twitter (@gautamtiwari003):

Conclusion

HTML and CSS are underrated but are powerful instead. They can do a lot of magic without even involving JavaScript (Don't get me wrong. I love JS❤).

I hope you learnt and built something with me today.

Keep coding imperfectly. Keep coding experimentally.

Thanks for reading.

One media query you didn't know about! + Comparison with similar queries

Gautam Tiwari — Wed, 16 Jun 2021 14:40:28 +0000

Do you want to know when the user has an input device that can hover over elements? Want to display the hover state without hovering when there's no hovering device? Have you made an element invisible that shows up on hover, but you are stuck with it on a mobile device?

Do you know what? There's a CSS only solution for this!

Hi guys! I am Gautam Tiwari, from Uttarakhand, India. I am a front-end developer, learner, and dev blogger.

Gautam TiwariFollow

Understanding the problem

I made a card component for my portfolio website (working on it). It shows an image, and the text content shows up on top of it. I gave the text content an opacity of 0. Now the text content becomes visible only when the user either hover over it or focus on it.

I settled with that until I realised that a mobile user would have a poor UX as they can't hover over the element.

I thought there must be a media query for this, so I Googled it and WUOLAH! I find a media query to solve this kind of problem and found three more similar media queries (which I'll explain in a few).

Here's the HTML code for the card component:

 <a
    rel="noopener noreferrer"
    target="_blank"
    href="https://bit.ly/35eecgK"
    class="recentlypublished__post"
>
    <img 
        src="https://bit.ly/2RUHcr6"
        alt="cover photo"
        class="recentlypublished__img"
    />
    <div class="recentlypublished__textbody">
        <p class="recentlypublished__date">May 30, 2021</p>
        <h3 class="recentlypublished__title">
            You are a developer just like me. No?
        </h3>
        <p class="recentlypublished__description">
            In the field of development, you will thrive if you keep
            learning, write good performing clean code, and stay away
            from...
        </p>
        <i
            class="
            fa fa-external-link-alt
            recentlypublished__externallinkicon
            "
        ></i>
    </div>
</a>

Here's the CSS code (without the media query), which you can safely ignore as it is just for styling it:

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 2rem;
  line-height: 1.6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

.recentlypublished__post {
  display: block;
  width: 100%;
  min-width: 200px;
  max-width: 600px;
  text-decoration: none;
  color: inherit;
  border-radius: 2rem;
  transition: box-shadow 200ms linear, transform 200ms ease-in-out;
  position: relative;
  color: #fefefe;
}

.recentlypublished__post:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.recentlypublished__post:focus {
  outline: 0;
  transform: scale(1.05);
  box-shadow: 0 0px 0 10px rgba(0, 0, 0, 0.19);
}

.recentlypublished__textbody {
  position: absolute;
  top: 0rem;
  left: 0rem;
  padding: 2rem 1.5rem;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 80ms linear;
  z-index: -1;
}

.recentlypublished__textbody > * {
  transition: transform 250ms ease-out;
  transform: translateY(2rem);
  text-shadow: 2px 0px 15px #00331c;
}

.recentlypublished__textbody::before,
.recentlypublished__textbody::after {
  content: "";
  position: absolute;
  border-radius: 2rem;
  z-index: -1;
  left: 0;
  width: 100%;
  height: 100%;
}

.recentlypublished__img {
  border-radius: 2rem;
}

.recentlypublished__title, 
.recentlypublished__description {
  line-height: 1;
}

.recentlypublished__description {
  position: absolute;
  bottom: 10%;
  width: 90%;
}

.recentlypublished__externallinkicon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 1rem;
}

.recentlypublished__post:hover > .recentlypublished__textbody,
.recentlypublished__post:focus > .recentlypublished__textbody {
  z-index: 2;
  opacity: 1;
}

.recentlypublished__post:hover > .recentlypublished__textbody::before,
.recentlypublished__post:focus > .recentlypublished__textbody::before {
  top: 0;
  background-image: linear-gradient(
    180deg, 
    #232323cf, 
    #202020bf 20%, 
    transparent 60%
  );
}

.recentlypublished__post:hover > .recentlypublished__textbody::after,
.recentlypublished__post:focus > .recentlypublished__textbody::after {
  bottom: 0;
  background-image: linear-gradient(
    0deg, 
    #232323cf, 
    #202020bf 20%, 
    transparent 60%
  );
}

.recentlypublished__post:hover > .recentlypublished__textbody > *,
.recentlypublished__post:focus > .recentlypublished__textbody > * {
  transform: translateY(0rem);
}

We have built a card component that shows text content on the :hover and :focus state. Cool!

Here's a preview that shows :hover and :focus state:

But what happens on a mobile or tablet?

Most mobile or tablets have a primary input of touch and have no support for hovering. For those mobile users, it would always look like this:

THAT is a bad UX. The user would not know the context of that article or link.

So, we shall now make the text visible to the user whenever the user has no hovering device.

Note: Users can tap and hold the card to activate the hover state, but they have no idea about that invisible content.

Introducing the `any-hover` media query

any-hover is the media query that checks if ANY available input mechanism allows the user to hover over the elements.

If they do allow hovering, then any-hover: hover holds true.

If they do NOT allow hovering, then any-hover: none holds true.

Using `any-hover: none`

Just add this code at the end of the previous CSS code.

/* Just for a responsive behaviour */
@media (max-width: 460px) {
  .recentlypublished__date {
    font-size: calc(0.3rem + 2vw);
  }
  .recentlypublished__title {
    font-size: calc(0.38rem + 2vw);
  }
  .recentlypublished__description {
    font-size: calc(0.2rem + 2vw);
  }
}

/* Just for a responsive behaviour */
@media (max-width: 280px) {
  .recentlypublished__description {
    display: none;
  }
}

/* -----any-hover implementation----- */
/* if any input device does not have
hover capability then: */
@media (any-hover: none) {
  .recentlypublished__textbody {
    opacity: 1;
    z-index: 2;
  }
  .recentlypublished__textbody::before {
    top: 0;
    background-image: linear-gradient(
      180deg,
      #232323cf,
      #202020bf 20%,
      transparent 60%
    );
  }
  .recentlypublished__textbody::after {
    bottom: 0;
    background-image: linear-gradient(
      0deg,
      #232323cf,
      #202020bf 20%,
      transparent 60%
    );
  }
  .recentlypublished__date,
  .recentlypublished__title,
  .recentlypublished__description {
    transform: translateY(0rem);
  }
}

Completed Codepen below:

We added a media query any-hover: none to check if ANY of the available input mechanism does not support hovering (e.g. in a mobile phone there is no hover capable input device OR when a laptop has support for touch then any-hover: none and any-hover: hover both holds true). Then, we display the text content if it's true.

THAT'S IT!

Remember: In CSS, whatever comes later gets applied (if it has the same specificity). So, if you mess up with the order of media queries, you may get unexpected results.

BONUS: Three similar queries and their explanation

hover: hover|none: Same as any-hover but inquiries only for primary input mechanism.

pointer: fine|coarse|none: Is the primary input mechanism (provided by the browser) a pointing device, and if so, how accurate is it? (Coarse corresponds to a pointing device with limited accuracy)

any-pointer: fine|coarse|none: Same as pointer but tests for all input devices and holds true if anyone device satisfies the query.

Table that summarises it all

property/situation	touch only	cursor	touch + cursor	cursor + touch
`hover`	none	hover	none	hover
`any-hover`	none	hover	hover	hover

`pointer`	coarse	fine	coarse	fine
`any-pointer`	coarse	fine & coarse	coarse & fine	fine & coarse

Not for IE and Opera Mini

Browser support is a huge thing when talking about such features.
In 2021, interaction media features (of which any-hover is a part of) has fairly good support among the browsers.

Conclusion

Here's an article that explains all this in more detail by Patrick H. Lauke. It literally covers almost everything you need to know more about these queries.

Subscribe to my newsletter and get articles like this directly in your inbox every Sunday.

Keep coding imperfectly. Keep coding experimentally.

Thanks for reading. I hope you learned something.

DEV Community: Gautam Tiwari

How to make a responsive hamburger menu using CSS only?

Why do we need a responsive menu?

Final Result

The Markup (with explanation)

Stylesheet (with explanation)

Stylesheet (for small screen sizes)

So what's happening here?

Conclusion

One media query you didn't know about! + Comparison with similar queries

Gautam TiwariFollow

Understanding the problem

But what happens on a mobile or tablet?

Introducing the any-hover media query

Using any-hover: none

BONUS: Three similar queries and their explanation

Table that summarises it all

Not for IE and Opera Mini

Conclusion

Introducing the `any-hover` media query

Using `any-hover: none`