Search the Community

Right now I have a mobile dropdown that works fine. The only issue I have is that when viewing it on my smartphone, the dropdown gets cut off at the bottom and I am unable to scroll it down to rest of it. Is there a way to fix it so that It's scrollable? Here's my js code of the dropdown. $(document).ready(function() { $(".nav-mobile li a").each(function() { if ($(this).next().length > 0) { $(this).addClass("parent-arrow"); } }) $(".toggle-mobile-menu").click(function(e) { e.preventDefault(); $(this).toggleClass("active-mobile"); $(".nav-mobile").toggle(); }); adjustMenu(); }); $(window).bind('resize orientationchange', function() { ww = document.body.clientWidth; adjustMenu(); }); var adjustMenu = function() { var ww = document.body.clientWidth; if (ww <= 850) { $(".toggle-mobile-menu").css("display", "block"); if (!$(".toggle-mobile-menu").hasClass("active-mobile")) { $(".nav-mobile").hide(); } else { $(".nav-mobile").show(); } $(".nav-mobile li").unbind('mouseenter mouseleave'); $(".nav-mobile li a.parent-arrow").unbind('click').bind('click', function(e) { // must be attached to anchor element to prevent bubbling e.preventDefault(); $(this).parent("li").toggleClass("hover"); }); } else if (ww > 850) { $(".toggle-mobile-menu").css("display", "none"); $(".nav-mobile").hide(); $(".nav-mobile li").removeClass("hover"); $(".nav-mobile li a").unbind('click'); $(".nav-mobile li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must be attached to li so that mouseleave is not triggered when hover over submenu $(this).toggleClass('hover'); }); } }

I am having trouble trying to change the height of a container. I want to shrink the whole thing down. Can anyone help me out? Here is the code I'm working with: /* Header Section css-------------------------------------------------------------- */ body { /* padding:0 30px;*/ font-family: 'Open Sans', sans-serif; background-color: #fff; } #wrapper{ position: relative; transition: all 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; } .container { padding-left: 0px ; padding-right: 0px ; } a:hover, a:focus{ text-decoration: none ; } h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #666; text-shadow: 0 0 1px rgba(0,0,0,0.01); font-family: 'Open Sans', sans-serif; font-weight: 600; } p , .textwidget{ font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 26px; } .head-contact-info{ display: block; text-align: right; padding-top:5px; padding-bottom:2px; padding-left:0; } .head-contact-info li { display: inline; margin-right:10px; font-size:18px; } .head-contact-info li a{color:#fff;} .head-contact-info i { margin-right:8px; font-size:20px; display: inline; } .logo{ text-align:left; padding-bottom:0px; font-family: 'Open Sans', sans-serif; } .logo a{ font-weight: 600; font-family: 'Open Sans', sans-serif; margin-bottom:10px; font-size: 50px; color: #fff; } .logo a:hover{ color: #fff; } .logo p{ font-family: 'Open Sans', sans-serif; margin-top:5px; color: #fff; }