From the course: Creating a Responsive Web Design

Unlock this course with a free trial

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

Adjusting to the logo and hero elements

Adjusting to the logo and hero elements - CSS Tutorial

From the course: Creating a Responsive Web Design

Start my 1-month free trial Buy for my team

Adjusting to the logo and hero elements

“

- Now by moving the navigation element down to where it appears in the HTML code, we now have an issue here where the navigation item was supplying us with that semi-transparent black color. So now we've lost the interplay with that darker color against the background graphic for our logo. So what we're going to do now is redefine the way the anchor tag is being displayed inside of the header area to recreate that same effect. So let's go back to our CSS file and in our header area, let's go in and target the anchor tag with a class of logo. So header a.logo. Let's add in our brackets. Let's split this open. Now but we're first going to do is we're going to set a width property to 100%. Then we're going to set a height of 66px. So now the logo will be as wide as the entire header, but still only 66px tall. On the next line let's redefine the position properties. So we're going to set a left property of 0px and a top property of 0px as well. Next we'll add in a background color that…

Contents