To do this, we will add some extra markup to our HTML code, providing a link to the menu at the top of the page. Perform the following steps:
1. We will start by adding the following line of code immediately above the desktop navigation menu in the markup, which means it will appear in the header:
<nav class="menu-link"><a href="#menu">Menu</a></nav>
2. And then inside the .access element, above the actual links, we will add the anchor to which that link will lead as follows:
<a class="menu-anchor" name="menu"></a>
3. This should only appear on small screens, so we'll use CSS to hide it on larger screens. We will add the following code snippet to the main part of our stylesheet, which applies to all screen sizes:
.menu-link, a.menu-anchor { display: none; }4. Then, within our media query for phones, we will add some CSS to reveal those links and style them:
.menu-link, a.menu-anchor { display: block; ...