The sticky menu is disabled for smaller screens due to the space they occupy and you can navigate to the top quickly in iPad/iPhone by touching the top bar of the browser window. You can tweak this behavior a bit by modifying the code in main.js at line number 51 –

$(window).scroll(function () {
        ......
        /* show sticky menu after screen has scrolled down 200px from the top in desktop and big size tablets only */
        if (width > 768 && (yPos > 200)) {
            $("#sticky-menu-area-wrap").fadeIn();
        } .....
    });

Changing the value 768 above to a lower value should help.

For menu overlapping with logo, it’s a little bit involved due to menu item highlighting that is involved. Pls see if this works for you –

@media only screen and (min-width: 768px) and (max-width: 959px) {

#primary-menu > ul.menu > li:hover, #primary-menu > ul.menu > li.sfHover { background-color: transparent; }

#primary-menu > ul.menu > li.current-menu-ancestor, #primary-menu > ul.menu > li.current-menu-item { border-bottom: 4px solid #46A5D5;
border-top: none; }

#primary-menu { position: relative; float: right;}
#header-logo { position: relative; }

}

You can vary the numbers in the screen width numbers above to suit your requirement. You can paste this into custom/custom.css file.