Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

What Is The Use Of Header And Navigation In CSS3?

We have given navigation type to float left, we will change it to float right. Let’s see what effect happen.

@media only screen and (min-width: 320px) and (max-width: 480px) {
                .logo{width:150px; height:75px;}
                nav{float: none;}
}

It will make float left automatically. But we can’t see the navigation properly, you will scroll bar. In responsive, scroll should not visible. Our website should fit in viewport. So, what will we do to fit it? Here, you can see all website are side by side so we will make them stand in stack. To change that define :

@media only screen and (min-width: 320px) and (max-width: 480px) {
wrap{width: 96%;}
.logo{ width:150px; height:75px;}
nav{ float: right; width: 100px;}
nav ul ui{display: block;}

Go to browser and refresh the web page. You will see, all navigation tab are stacked and wrap is also set to 96% width. Check the scroll bar, navigation tab will not move now from their place upto 480px. Here you can see, LinkedIn is broken so to adjust it; make changes as per below in some command :

nav{ float: right; width: 130px;}
nav ul {margin-top: 0px;}
nav ul ui{display: block;}

After saving and refreshing the web page, you will see google, Facebook and LinkedIn aligned and also started from top. This is how you can set header using media only.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere