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

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points

jQuery drop down gap?

so I have two elements added next to each other when the window is sufficiently small, a header and a three bar drop down menu. When I toggle the drop down menu there is a small gap between the header and the toggled menu, any suggestions on how to eliminate this gap? I have already toyed with the header height and margins and cant ever seem to get rid of that gap when I drop down the menu.

Hi David,

Can you put that header and menu up on codepen? Or do you have this live somewhere?

David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

forgive me for some of the messy probably repeated code, haven't had time to clean it up. http://codepen.io/djarrin/pen/ELxkH

2 Answers

Hey David

To create a two column effect, its usually best to float them (and in the future use flexbox). When you use display: inline-block to do this, you get unwanted 'white space'.

To remove the gap

remove 'display: inline-block' from #menu....

remove 'display: inline-block' from #mobileHeader and add 'float: right';

@media screen and (max-width: 768px) {
  #menu {
    width:15%;
    background:black;
    font-size:1.35em;
    color: white;
    float: left;
    height: 1.5em;
  } 

  #mobileHeader {
    float: right;
    text-align: center;
    background: black;
    color:  red;
    width:  85%;
    height: 1.0em;
    font-size: 2.0em;
  }
}

cheers

Zakery Kates
Zakery Kates
5,280 Points

It's because your #mobileHeader is "floated" in the mobile state. The combination of the MobileHeader being floated and the Nav Ul having padding on the top, during the toggle it's having trouble figuring out exactly where it's final position will go.

I suggest:

#mobileheader {
float: none;
display: block;
margin: 0 auto 10px; 
}

Transition is now smooth.