Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Right now, on our small screen device, our navigation links looks like text links. So what we're going to do is write some CSS properties to turn these into links that look more like mobile link buttons. So let's come back to our text editor. After our nav element, nav a, beginning and ending in bracket. Let's split that open. The first thing we're going to do is set the color. That's going to be #a6abc5;. Next, we're going to set display. We're going to set this to block. So, we want to have the anchor links on the small screen behave like blocks, so they'll be more like paragraph or div tags, rather than inline blocks or inline elements from the large screen.
Next property, we're going to set margin, 15 pixels for all sides. Let's hit a return. padding we're going to set 9 pixels for all sides. Next, we're going to set border. So border:, we're going to use shorthand style here, which is the size, then style, then color. So for the size it's going to be 1 pixel, hit a space, solid, space, #a6abc5;.
Let's hit a Return. We're going to set background, url beginning and ending parenthesis, ../images/mobile_link_arrow.png, space, set the repeat to no-repeat. Let's set the X property to right and the Y property to center. Now the next property we're going to create is going to be for rounded corners.
These are CSS3 properties, and some browser still require special flags until the CSS3 specification has been finalized. So we're going to target Mozilla and WebKit. Mozilla powers Firefox and WebKit powers Chrome, Safari, Android, and iOS devices. So let's start by typing -moz-border-radius: 12 px. Let's come in here and select and copy that entire property.
Let's hit a return. Let's paste on the next line and replace the moz with webkit. Let's hit a return. Let's paste that rule again, and let's remove the browser flags. So the final CSS3 property will be called border-radius, set to 12 pixels. Now, the next rule we're going to create is going to be for a hover state. So nav a:hover, beginning and ending bracket.
We're going to set color of the type to white, so #fff. Next we're going to set background-color and in here, instead of using a pound sign, we're going to use a color space called rgba. So let's type rgba, beginning and ending parenthesis. Inside the parentheses, we're going to specify the values for red, green, and blue, and the fourth property, which is the a, stands for alpha, or the amount of transparency. So to get white, we want to have 255 for the first value, comma, 255 for the second, 255 for the third.
So red, green, and blue are all set to their maximum values, which gives us white, then a comma, and then .15 for 15% alpha, or 85% transparent. Then outside the parentheses, we'll hit a semicolon. Let's save our work. Let's come back out to our browser. Let's hit Reload. Let's scroll down a little bit, and now we'll see that our anchor links have changed from looking more like text to now looking like mobile link buttons. Now, I do like to specify a hover state on my mobile links, for two reasons. One, if somebody condenses their browser down, like we're doing here, they can get the hover state with their mouse, and second, most touch devices will activate the hover state when somebody taps on that individual link. So this will give the users feedback that they've actually tapped on a specific link.
So now that our navigation is positioned and styled for small screens, next we can work on the promo area.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47328 Viewers
117 Video lessons · 34277 Viewers
113 Video lessons · 80259 Viewers
116 Video lessons · 70183 Viewers