From the course: HTML and CSS: Creating Navigation Bars

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Solution: Style a horizontal nav bar

Solution: Style a horizontal nav bar

From the course: HTML and CSS: Creating Navigation Bars

Start my 1-month free trial Buy for my team

Solution: Style a horizontal nav bar

“

(punchy electronic music) - [Instructor] So, how'd you do with that challenge? Hopefully it wasn't too terribly difficult for you! So, let me walk through how I made my particular navbar. So just to review once again, this is the way it looks. I've got a nice blue hover. I've got my icons changing color. And then I've got my logo, all the way over here on the left-hand side. How on earth did I make this happen? I'm going to tighten this back up again so we have room to look at the code here, and let's start with our HTML. So here in the HTML, the very first list item that I have is my LinkedIn Learning logo. And the way I set that up is as follows. So, I have my logo itself. There's the i with the class of linkedin, and the aria-hidden true, which we talked about before. And then inside of that, I've added a LinkedIn here. Okay? The words LinkedIn, and those are surrounded by a span with a class of sr-only. And that class of sr-only comes with the Font Awesome style sheet, and it…

Contents