导航栏是否位于桌面标头中，如何使其响应？

Question

On the desktop version of my site I have the nav inside the header. How will I go about making the nav responsive for mobile if the nav is inside the header?

js fiddle - https://jsfiddle.net/24pyfmn4/

<header>
    <div class="header">
        <h1 class="logo"><a href="index.html">New York</a></h1>
        <nav class="main-navigation">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="photos.html">Photos</a></li>
                <li><a href="videos.html">Videos</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

Answer 1

Indeed. Like Shebary pointed out, you have to use media queries , unless of course, you prefer using JavaScript (which I don't really recommend).

Quick tutorial on media queries .

---

///Making the mobile nav appear while the header disappears.

@media screen and (max-width:640px){
     .mobile-nav {
           display: block;
      }
     header {
           display: none;
      }
}

///Making the mobile nav disappear while the header appears.

@media screen and (min-width:641px){
     .mobile-nav {
           display: none;
     }
     header {
           display: block;
     }
}

Also , it's important to note that the ".mobile-nav" class has to be defined. Like so:

.mobile-nav {
     ///Styling code
}

EDIT

You're also missing a bracket here:

@media screen and (max-width:959px){

.pic-vid{
    width:90%;
}

.nycimg{
    width:100%;
}

.video-title{
    width:100%;
}

.second-video{
    margin:0;
    width:100%;
}

.third-video{
    margin:0;
    width:100%;
}

.fourth-video{
    margin:0;
    width:100%;
}

} /// <- this one

Answer 2

Here's another example to help you responsive web nav

In your case, the header will be width:100% and just the nav will collapsed according with the screen size. (using @media screen according to Edward) Hope it helps.