Time for action—hiding elements using CSS

The easiest way to hide content is by using CSS by adding classes for content to be displayed on specific devices. Let's try it out. Perform the following steps for doing so:

1. 1. Firstly, let's look at the CSS we used in Chapter 5, Working with Text and Navigation. First, we will look at the HTML in the header, where the menu would normally appear:

   <nav class="menu-link"><a href="#menu">Menu</a></nav>
   

   Inside the main navigation, but above the first navigation link, we will have:

   <a class="menu-anchor" name="menu"></a>
   

2. 2. Next, the CSS in the main styling for the desktop site is as follows:

   .menu-link, a. menu-anchor {
   display: none;
   }
   

   And the CSS in the media query for screen sizes of 480px or less is as follows:

   .menu-link, a.menu-anchor {
   display: block;
   }
   

   The code we want to work with here is the display: none and display: block declarations. We will apply those to specific classes for desktop or mobile sites.

3. 3. The...