See if this solves your issue: Sample
$("#toggleservices").click(function(){
$("#fullservices").stop().slideToggle({queue: false});
$("#taglinecontainer").stop().slideToggle({}).delay(600);
});
Question
I am having trouble with this set up. When I click the 'Services' link it drops down, but then if I use the same 'Services' link to close the drop down/slide down area, when I reopen it, it doesn't expand/contract to fit the content, the size just freezes, where as if I close it with the 'Close' link that's inside the slide down area, it carries on working fine.
(Click Services, Hover over a link, then click Services again to close it, then again to open it and hover over a link again to show the problem I mean)
jsFiddle for reference
$(document).ready(function(){
$("#closebtn").click(function(){
$(".expandable").stop().slideUp().delay(600);
$(".expandable2").stop().slideUp().delay(600);
$("#taglinecontainer").stop().slideToggle({queue: false}).delay(600);
});
$("#toggleservices").click(function(){
$(".expandable").slideUp().delay(600);
$("#fullservices").stop().slideToggle({queue: false});
$("#taglinecontainer").stop().slideToggle({}).delay(600);
});
$("#togglesectors").click(function(){
$(".expandable").slideUp().delay(600);
$("#fullsectors").slideToggle({queue: false});
$("#taglinecontainer").slideToggle({}).delay(600);
});
});
$(document).ready(function(){
$("#togglestrategyblurb").hoverIntent(function(){
$(".expandable2").slideUp();
$("#strategyblurb").slideToggle();
}, function(){
});
$("#toggledesignblurb").hoverIntent(function(){
$(".expandable2").slideUp();
$("#designblurb").slideToggle();
}, function(){
});
$("#toggleprblurb").hoverIntent(function(){
$(".expandable2").slideUp();
$("#prblurb").slideToggle();
}, function(){
});
$("#togglewebblurb").hoverIntent(function(){
$(".expandable2").slideUp();
$("#webblurb").slideToggle();
}, function(){
});
});
Solution
See if this solves your issue: Sample
$("#toggleservices").click(function(){
$("#fullservices").stop().slideToggle({queue: false});
$("#taglinecontainer").stop().slideToggle({}).delay(600);
});
OTHER TIPS
add overflow
to your header
header {
background: rgba(0, 0, 0, 0.6);
min-height: 50px;
overflow:auto;
}