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

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
Posted by David Jarrin
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.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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
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

Matt Harris
Matt Harris
2,762 Points

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
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.