Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Bret Vallun
Bret Vallun
6,087 Points

Header and navigation issues

I have been having issues when the screen resolution gets smaller. I am pretty new to all of this, and I have tried a lot, so please ignore the mess I have made. I would like the header to respond in the same manner that Nick Pettit's Basic HTML did. Thank you.

<!DOCTYPE.html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Vowed to Vallun</title>
        <link rel="stylesheet" href="css/layout.css"/>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/responsive.css"/>
    </head>
    <body>
        <div class="wrapper">
       <header>
          <div class="logo">
        <h1>Bret and Whitney</h1>
        <h2>April 1, 2017</h2>
              </div>
             <nav>
            <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
            </ul>
             </nav>
       </header>
            <ul class="cb-slideshow">
               <li> 
        <figure>
            <img src="img/ourday.jpg" width="1500" height="1000" />
        </figure>
               </li>
           <li>
        <figure>
            <img src="img/proposal.jpg" width="1500" height="1000" />
        </figure>
        </li>
               <li>
        <figure>
            <img src="img/united.jpg" width="1500" height="1000" />
        </figure>
               </li>
        </div>
            <div class="push"></div>
        </div>
        <div class="footer">
        <a href="http://twitter.com/reddiebret"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
            <a href="http://facebook.com/bret.vallun"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
                <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

/*********************************
GENERAL
**********************************/

* {
margin: 0;
}

html, body {
height: 100%;
margin: 0;
padding: 0;
}

/*********************************
HEADER
**********************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}


h1 {
  font-family: 'lobster', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
  text-shadow: 5px 5px 10px #000;
}

h2{
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

/* blue header */
header{
  background: lightblue;
  border-color: #000000;
  margin: 0;
  padding: 0;
}


/* nav background on mobile */
nav {
  background: #002952;
}

h1, h2 {
  color: #fff;
}

/*********************************
slideshow
**********************************/

.cb-slideshow {
    text-decoration: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.cb-slideshow li figure img {
  text-decoration: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
  padding: 0;
}


/*********************************
NAVIGATION
**********************************/


nav {
  text-align: center;
  padding: 10px 0;
  color: 20px 0 0:
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
    display: inline-block;
}


nav a {
  text-decoration: none;
  font-weight: 800;
  padding: 15px 10px
}


/* links */
a {
  color:  #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #7c9ca6;
}

  nav{
    background: none;
    font-size: 1.125em;
    margin-right: 0;
    margin-top: 50px;
    padding-top: 0px;
    text-align: center;

    display: inline-block;
  }

 .logo {
    float: left;
    margin-left: 25px;

  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }




}


/*********************************
FOOTER
**********************************/

.wrapper {
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto 25em;
padding: 0;
}
.footer, .push {
height: 4em;
}

.social-icon {
  width: 20px;
  height: 20px;
  margin: 0 5px;
}

.footer {
    text-align: center;
}

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

  /***********************
  TWO COLUMN LAYOUT
  ************************/



  #primary {
    width: 50%;
    float: left;
  }

  #secondary {
    width: 40%;
    float: right;
  }  

  /***********************
  PAGE PORTFOLIO
  ************************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(4n) {
    clear: left; 
  }

  /***********************
  PAGE PORTFOLIO
  ************************/

  .profile-photo {
    float: left;
    margin: 0 5% 80px 0;
  }

}

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

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

  nav {
    background: none;
    float: right;
    font-size: 1.125em;
    margin-right: 5%;
    text-align: right;
    width: 45%;
  }

 .logo {
    text-decoration: none;
    float: left;
    margin-left: 2.5%;
    text-align: left;
    width: 45%;
  }

  h1 {
    font-size: 2.5em;
  }

  h2 {
    font-size: 0.825em;
    margin-bottom: 20px;
  }

  header {
    border-bottom: 5px solid #7c9ca6;
    margin-bottom: 0;
  }

2 Answers

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

If I use your code and preview it, the navigation is on the right when viewed on a large screen/window, and then wraps beneath the logo on a small screen/window... so it seems to work for me.

If you mean the navigation items should be centered, it's because their container nav element doesn't take up the full width on small screens.

Add width: 100%; for the base styles (not inside the media query) in your responsive.css:

  nav{
    background: none;
    font-size: 1.125em;
    margin-right: 0;
    margin-top: 50px;
    padding-top: 0px;
    text-align: center;
    display: inline-block;
    width: 100%; /* Add this line */
  }

That line will be overridden when the page is viewed on a larger screen, since there's another rule for that, that sets the width to 45%.

Note that you have some invalid HTML (closing div tags without opening tags), and you're repeating quite a few CSS rules/selectors (including the nav one above), but that's something you can tackle later after you get it working how you want!

Joshua Harman
Joshua Harman
8,821 Points
Joshua Harman
Joshua Harman
8,821 Points

Question... at which point in the curriculum does this code correlate?

That way I can know how best to try to help?

If you don't know just take a snapshot of your workspace.

Here's how:

  1. Launch any of your workspaces.
  2. Select the snapshot menu in the upper right corner.
  3. Click "Take Snapshot"
  4. Visit the link and share it with someone.