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 trialDavid Jarrin
Courses Plus Student 11,182 PointsjQuery 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.
David Jarrin
Courses Plus Student 11,182 Pointsforgive 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
2,762 PointsHey 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
5,280 PointsIt'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.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi David,
Can you put that header and menu up on codepen? Or do you have this live somewhere?