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 Jeremy Colbert
Jeremy Colbert
618 Points

Need help making the .brand larger without stretching the .navbar. I have tried padding, overflows, aligns, etc

Ok so I have been working on this site and I am having an issue where I can not seperate the .navbar and the .brand ( logo ). I have tried padding, alignments, overflows, etc and nothing is getting it to where I can make the Logo bigger but not stretching the navbar.

I would not care if the logo was half in the .nav and half under it, but then that goes into a hero-unit issue i guess.

bootstrap.css 
 .navbar .brand {
  float: left;
  display: block;
  padding: 8px 20px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: #FFFFFF;
  text-shadow: 0 1px 0 #2E8BCC;

public function properties() {
        return array(
            'brand' => CHtml::image(app()->theme->baseUrl . '/images/logo.png', app()->name, array('width' => 150, 'height' => 30)),
            //'fluid' => true,
            'collapse' => true,
            'fixed' => false,
            'brandUrl' => aUrl('/'),
            'items' => $this->items(),
            'htmlOptions' => array(
                'id' => $this->getDOMId(),
            ),
        );
responsive.css 
.navbar-fixed-top,
  .navbar-fixed-bottom {
    position: static;
  }
  .navbar-fixed-top {
    margin-bottom: 20px;
  }
  .navbar-fixed-bottom {
    margin-top: 20px;
  }
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding: 5px;
  }
  .navbar .container {
    -width: auto;
    padding: 0;
  }
  .navbar .brand {
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 0 0 -5px;
  }
main.css 
.navbar{
    margin-bottom: 0px !important;
}

I would appreciate someone with a lot more experience than myself to help me out. I have hours and hours into researching trying to get this issue fixed but every solution I read or attempt does not work.

I thought it was a padding issue, so when I made the .brand larger that the padding was adjusting itself to maintain it. And that still may be the case but I guess I am not adjusting the right part of the code.

Thanks in advance.

1 Answer

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Jeremy,

I don't know how your navbar is structured although I'm assuming it's an unordered list because they usually are. If that's not the case, you can easily modify the CSS presented to fit your needs.

I'm going to post a codepen below that shows what I did.

What I did first off was add a "max-height" of a static unit value to my navbar element. This will keep the height of the navbar to no more than the value specified. And then by vertically aligning the image with the "top" of the navbar, you can then modify the width, height, and padding/margins of the image to get the desired effect without the navbar increasing in size. The two key properties that really make this solution run, though, are "max-height" and "vertical-align".

Another interesting property is selecting how overflow is handled. If it is set to "hidden", the borders of the logo will disappear beneath the boundaries of the navbar. If it is not explicitly set to hidden, the logo will pop out of the navbar. You can see what I mean by uncommenting the line "overflow: hidden" under the ".navbar" selector. So that you can see how the logo is being displayed better, I added a 1px black border around the navbar.

http://codepen.io/anon/pen/mJRqjd

Jeremy Colbert
Jeremy Colbert
618 Points

Hey Marcus,

Thanks for the reply. The solution worked. The issue is that the backend was utilizing multiple css files and the changes made were needing to be made on a bootstrap.css, main.css and a few others. But setting max-height: from auto to a set px seemed to stop the stretching. I will play around with the overflow see what creative look we can come up with.

Thanks for the help Jeremy

Marcus Parsons
Marcus Parsons
15,719 Points

My pleasure! Good luck and happy coding!