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.

Removing the header height restrictions

Removing the header height restrictions - CSS Tutorial

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

Start my 1-month free trial Buy for my team

Removing the header height restrictions

“

- Now we need to set the header area in our html to grow if the mobile menu or any items inside of the header need to get taller than the available space. So to do this we're going to go back to our CSS file. Let's make sure we're in the media query for a max-width of 625. Let's find the header area inside of here, and here we have the height set to 160 pixels. We're going to instead come in here and change the 160 to auto. This will allow the height of the header element to encompass all of it's children. After that we're going to come in here and set a minimum height. So we'll set min-height, and we're going to set that to 160 pixels. This way, when the mobile menu is in a hidden state, the height of the header will still be 160 pixels, so we can see the banner background graphic but we're not going to limit the height if the mobile menu is activated. And now, with these changes for screens under 625, let's scroll down and let's find the media query for screens that are a maximum…

Contents