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

Blair Owens
Blair Owens
8,235 Points
Posted by Blair Owens
Blair Owens
8,235 Points

Nav bar won't line up with title/logo

I am having trouble lining up my site title/logo with my nav bar after expanding viewport from mobile view. I am trying to get the nav bar to be lined up with the title, floated on the right side, but it is sitting below the title instead. It seems my id=banner is attached to my nav bar and follows it when I try to reposition, I'm not sure why. Tried so many different variations and can't seem to figure it out. Your help is much appreciated! Also if you see anything that I could do to improve the quality of my coding, let me know! Happy coding.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="responsive.css">
</head>
<body>
<div id="wrapper">
    <div id="header-container">
        <div id="header">
            <h1 id="logo">Wonder Website</h1>
        </div>
        <nav class="group">
          <h2 class="navheader slide-trigger">Menu</h2>
          <ul class="navigation group">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
    </div>
    <div id="banner">
    </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
/* MOBILE COLLAPSE MENU */
(function($) {
  $.fn.collapsable = function(options) {
    // iterate and reformat each matched element
    return this.each(function() {
      // cache this:
      var obj = $(this);
      var tree = obj.next('.navigation');
      obj.click(function(){
        if( obj.is(':visible') ){tree.toggle();}
      });
      $(window).resize(function(){
        if ( $(window).width() <= 570 ){tree.attr('style','');};
      });
    });
  };
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
    $('.slide-trigger').collapsable();
});
</script>
</body>
</html>

CSS

html, body {
    width: 100%;
    margin: 0 auto;
}

#wrapper {
    width: 100%;
    margin: 0 auto;
}

.navigation {
  max-width: 100%;
  background: #FFF;
  padding: 0;
}

.navigation li {
  float: right;
  list-style-type: none;
  display: block;
}

.navigation li a {
  display: block;
  color: #000;
  text-decoration: none;
  padding: 10px;
}

.navigation li a:hover {
  background: #0fcaf2;
}

.navheader { 
    height: 40px;
    font-size: 25px;
    text-align: center;
}

.slide-trigger {
  display: none; /* need this */
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  margin: 15px 0 0;
  padding: 10px 0 0;
  cursor: pointer;
}

.slide-trigger span {
  background-image: url("/a/i/dropdown-arrows.png");
  background-position: 0 -14px;
  display: block;
  float: right;
  margin-top: 3px;
  height: 14px;
  width: 32px;
}

#logo {
    display: inline-block;
}

#header-container {
    display: block;
}

#banner {
    width: 100%;
    height: 1000px;
    background-color: blue;
    display: block;
    clear: both;
}

Responsive

@media only screen and (max-width: 560px) {
    .slide-trigger { 
        display: block; 
    }
    .no-js .slide-trigger { 
        display: none; 
    }
    .navigation { 
        display: none; 
    }
    .no-js .navigation { 
        display: block; 
    }
    .navigation { 
        margin: 0; 
    }
    .navigation li { 
        float: none; 
    }
    .navigation li a { 
        color: #000; 
        text-decoration: none;
    }
    li {
        border-top: 1px solid #CCCCCC;
    }
    #header-container {
        display: block;
    }
}

1 Answer

Mackenzie Child
Mackenzie Child
4,468 Points
Mackenzie Child
Mackenzie Child
4,468 Points

You probably just need to add a ' float: left; ' to your #logo :)

Blair Owens
Blair Owens
8,235 Points
Blair Owens
Blair Owens
8,235 Points

That's does what I want when in desktop view, but causes problems in mobile view. Still playing around with it to see if I can adjust something. Thanks though!