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.