Nav in desktop viewport disappears when nav from mobile version is extended.

Question

So I have media queries set up so when browser is mobile size, there is a nav button that drops down nav. When it's wider, the nav is just displayed across the screen. I'm running into a weird problem where when I shrink the browser width down and leave the nav extended, and then go back to regular desktop width, the nav won't show. Any ideas?? Thanks.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8">
    <title>Fresh Track    |   Synth driven dance/funk/rock music</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Candal|Passion+One:400,700,900|Nunito:400,300,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="css/lightbox.css" rel="stylesheet">
  </head>
  <body id="body">
    <header>  
      <div id="logodiv">
          <img src="img/freshtracklogo.jpg" alt"freshtracklogo" id="freshtracklogo">
      </div>  
      <p class="navbutton"><a href="#main-nav" id="access_nav" class="access_aid">Skip to navigation</a></p>
      <div id="socialdiv">
        <iframe id="bandsintowntracker"  src="http://www.bandsintown.com/artist/Passion%20Pit/track_button?size=small&display_tracker_count=false&text_color=%23FFFFFF&background_color=black" height="24" width="89" scrolling="no" frameborder="0" style="border:none"; overflow:hidden; allowtransparency="true"></iframe>
        <a href="https://www.facebook.com/freshtracktothebrain/?ref=aymt_homepage_panel">
          <img src="img/facebookicon.png" alt"Facebook Logo" class="social-icon">
        </a>
        <a href="https://www.instagram.com/freshtrackmusic/">
          <img src="img/instagramicon.png" alt"Instagram Logo" class="social-icon">
        </a>
        <a href="https://www.youtube.com/watch?v=9Ii3NoOhZDQ">
          <img src="img/youtubeicon.png" alt"Youtube Logo" class="social-icon">
        </a>
      </div>
      <nav id="main-nav">
          <ul class="nav">
              <li><a href="index.html" class="selected">Home</a></li>
              <li><a href="about.html">About</a></li>
              <li><a href="media.html">Media</a></li>
              <li><a href="dates.html">Dates</a></li>
              <li><a href="contact.html">Contact</a></li>
          </ul>
        <p class="navbutton"><a href="#body" id="access_top" class="access_aid">Skip to top</a></p>
      </nav>
    </header>
    <hr>
    <div id="wrapper">
      <section>
        <img src="img/freshtrackalex4.jpg" id="homeimage">
      </section>
      <footer>
        <p>&copy; 2016 Fresh Track.</p>
      </footer>
    </div>  
  </body>  
</html>

/*************************************
General
*************************************/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Open sans', sans-serif;
}


a {
  text-decoration: none;
}


img {
  max-width: 100%;
}

#wrapper {
  max-width: 1200px;
  margin:  20px auto  0 auto;
  padding: 0 5%;
  clear: both;
}

/*************************************
Header
*************************************/

header {
  width: 100%;
  margin: 0 0 20px 0;
  padding: 0;
  float: right;
}



/*Logo*/
#freshtracklogo {
  width: 150px;
  height: 100px;
  display: none;
}

#socialdiv {
  display: none;
}

hr {
  display: none;
}





#bandsintowntracker {
}

.social-icon {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}

#socialdiv {
  float: right;
}

/*************************************
Nav
*************************************/


nav {
  display: none;
  width: 90%;
  margin: 0 0 30px 5%;
  padding: 0;
}


nav ul {
  width: 100%;
  margin: 0;
  padding: 0
}


nav li {
  padding-top: 10px;
  padding-bottom: 10px;
  text-align: center;
  width: 100%;
  margin: 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 3px;
}


nav ul li a {
  font-size: 1em;
  display: block;
  padding: 0 100px;
  font-weight: 800; 
}


/*nav display/hide*/
#main-nav:target {
    display: block;
}

/*Nav buttons*/
.access_aid {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 0;
    padding-top: 42px;
    overflow: hidden;
    border: 1px solid #ccc;
    background: #21759b 10px 10px / 20px 20px no-repeat;
    margin-bottom: 20px;
}

#access_nav {
    background-image: -webkit-repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
    background-image: repeating-linear-gradient(#ccc, #ccc 2px, #fff 2px, #fff 4px);
}

#access_top {
    background-image: linear-gradient(45deg, transparent 13px, #ccc 13px, #ccc 15px, transparent 0), linear-gradient(-45deg, white 13px, #ccc 13px, #ccc 15px, white 0);
}

/*************************************
Home page
*************************************/

#homeimage {
  display: block;
  margin: 20px auto;
}

/*************************************
Photo Gallery
*************************************/

#photo-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

#photo-gallery li {
  float: left;
  width: 45%;
  height: auto;
  margin: 0 2.5%;
  margin-bottom: 20px;
}

#photo-gallery p {
  text-align: center;
  Font-size: .5em;
  font-weight: 200;
}

.media-section {
  clear: both;
  text-align: center;
  font-size: 3em;
  font-weight: 600;
}

/*************************************
Video Gallery
*************************************/

#video-gallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  margin-bottom: 20px;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*************************************
Footer
*************************************/

footer {
  width: 100%;
  padding-top: 50px;
  text-align: center;
  clear: both;
  display: block;
}

/*************************************
FONTS AND COLORS
*************************************/

.media-section {
  font-family: 'Montserrat', sans-serif;
}

#main-nav li a {
  font-family: 'Candal', sans-serif;
  font-size: 1.5em;
  font-weight: 600;
}

/*************************************
Hover effects photo gallery
*************************************/

.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

@media screen and (min-width: 400px) {

}

@media screen and (min-width: 660px) {

  header {
    margin: 0;
  }

/*  hide nav buttons*/
  .access_aid {
    display: none;
  }

  .navbutton {
    display: none;
  }

/*  logo appear*/
  #freshtracklogo {
    display: inline-block;
  }

/*  reset nav collapse*/
  #main-nav {
    display: block;
  }

/*  NAV*/
  #main-nav {
    display: inline-block;
    width: 75%;
    margin: 20px 0 0 0;
    margin-bottom: 0;
  }

  nav ul {
    overflow: auto;
    width: auto;
    margin-bottom: 0;
  }

  nav li {
    padding: 4px 0;
    width: 19.5%;
    display: block;
    float: left;    
    margin-right: 0.5%;
    margin-bottom: 0;
    text-align: center; 
    border: none;
    border-radius: 5px;
  }

  nav ul li a {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    color: black;
  }

  /* Logo */
  #logodiv {
  float: left;
  margin-bottom: 10;
  width: 150px;
  height: 100px;
}

  /* Social Icons */
#socialdiv {
  float: left;
  display: inline-block;
  width: 65%;
  margin: 10px 0 0 2%;

}  

  /* nav color transition */

  a
{
-webkit-transition: color .25s ease-in-out;
-moz-transition: color .25s ease-in-out;
-o-transition: color .25s ease-in-out;
transition: color .25s ease-in-out;
color: #FF4E50;
  }

  a:hover
{
color: #2F9999;}

a:hover > nav ul li {
    background: grey;
  }  

  hr {
    display: block;
  }

/* 3 column gallery layout */
  #photo-gallery li {
    width: 28.333333333333333%;
  }

}  

@media screen and (min-width: 957px) {
 #video-gallery li {
    width: 45%;
    height: auto;
    margin: 0 2.5%;
    float: left;
  } 

 .video-container {
    width: 100%;
}
  .video-container iframe {

  }

}

Answer 1 · 2016-03-11T16:40:27Z

March 11, 2016 4:40pm

Hi Alex,

I have a simple responsive nav on codepen that you may want to take a look at.

I spent a long time creating this based on what I had seen within the bootstrap framework and it works well at all screen sizes.

It have a few little nice touches I feel that are not to code heave and it uses flexbox which is nice and modern but I stuck to the features I know have good browser support.

The pen is set up with normalize, jQuery and Autoprefixer as well as using Sass, so if you want to take the CSS code be sure to click the View Compiled in the top right of the CSS window and copy that code not the Sass unless you are using Sass of course.

Any help on it just let me know!

Craig

Welcome to the Treehouse Community

Looking to learn something new?

Alex Weinberg

Alex Weinberg

Nav in desktop viewport disappears when nav from mobile version is extended.

evan rost

evan rost

1 Answer

Craig Watson

Craig Watson