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.

Adjusting the logo to overlap the menu

Adjusting the logo to overlap the menu - CSS Tutorial

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

Start my 1-month free trial Buy for my team

Adjusting the logo to overlap the menu

“

- Now we need to restyle the logo and make a few minor laylo adjustments before we can start adding in some JavaScript. Now in the previous course we added a semi-transparent background to the logo, because the navigation element was being moved from the top of the screen down to below the content. Which means we didn't have that interplay with the semi-transparency for the logo. But now that we have the navigation element in the header area at all times, we can go back into our CSS and change those properties to make the logo semi-transparent. So let's go back to our CSS file, let's make sure we're inside of the media query which is targeting a maximum width of 625, let's find the header logo, let's find the width property and let's come in here and let's change the width to 125 pixels. Let's come over to the height, let's set this to 52 pixels. Next for the left positioning property we're going to set that to 10. The top property we're going to set that to 10 and then we're going to…

Contents