From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Adding a mobile link button

Adding a mobile link button - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Adding a mobile link button

“

- So now we'll add a link to our navigation for the mobile menu. First let's go back to our text editor. Let's go into our index.html file, let's find our navigation element, and before the unordered list, let's hit a return and let's add in an anchor tag. So start with a less than sign, an A tag, space, we'll add a class. We'll call this mobile_menu. Outside of that attribute, let's add a title attribute, title=, and we'll just call this menu. Then a space, we'll add an href, we'll just link this to a pound sign. Then we'll end the tag, and then end the element. So now we simply just have an anchor link outside of the unordered list. This is the menu icon that we're going to show on small screens, so later on, when somebody clicks on this, we'll use JavaScript to extend the unordered list down here. So with the HTML in place, let's go back to our exercise files. Let's go into the CH_01 folder. So let's come in here and option drag or copy and paste this SVG graphic into our project…

Contents