Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Stein Christensen
Stein Christensen
3,592 Points

Help with child element over flowing

My goal is to style a navigation with a larger logo that extends above and below the navigation.

Including the logo in the navigation, floating it left, and clearing it does not solve the problem because navigation now stretches to include the height of the large logo.

Help is greatly appreciated!

I should have asked a clarifying question before answering.

Do you have a background color applied to your navigation or do you have it applied to your header?

Could you provide us with your header plus some content and your CSS in CodePen? This will really help to diagnose your issue and will help you get a speedy response.

Cheers!

3 Answers

Sean T. Unwin
Sean T. Unwin
28,660 Points

If your logo is inside the navigation and you want it to be placed "freely" or outside the bounds of it's parent (the navigation) without affecting the parent, then you can use position: absolute on the logo. That way you can adjust the size and placement to your liking.

Have you tried using a negative top and bottom margin on your logo?

If you have markup similar to the following then the negative margins should do what you need.

<header>
  <img src="path/to/your/logo" alt="" id="logo" />
  <nav role='navigation'>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </nav>
</header>
Stein Christensen
Stein Christensen
3,592 Points

That worked great Jason thank you! In combination with absolute positioning I have what Im looking for.

It is a little buggy in mobile layout however. I set the logo to inline block to allow the nav elements to resize the logos width, however the height does not change as the view port shrinks.

I set the logo size as a %, but it does not resize properly maybe because it is floated.

Hi Stein,

Do you have the mobile problems resolved yet?

Maybe either post the relevant code or better yet put it in a codepen and we can test.

Although this thread is now old, answers to this question and many more about the subject can be found in The CSS Layout Techniques Course. For this question specifically, The relative and absolute positioning lessons in the Positioning Schemes chapter is relevant.