Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 27, 2015 at 12:38 am #403084
    dburton77

    Hi. I found the following code on the forum to make the Nav sticky on mobile devices and added to a site:

    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    }
    @media only screen and (max-width: 767px) {
    .responsive #main {
    padding-top: 90 !important;
    }
    }
    @media only screen and (max-width: 767px) {
    .responsive #top #main { padding-top:82px!important; }}

    However, now the site hangs up when scrolling on iPhone (not sure about android smartphones). Once the user scrolls to the bottom of the page, then scrolls back to the top, it becomes impossible to scroll for 5-10 seconds. It seems to gum up the works. Any ideas?

    Best,

    Doug

    February 27, 2015 at 3:21 pm #403443
    Yigit

    Hey Doug,

    Can you please elaborate on the issue? I checked your website on my iphone and could not see any issue with mobile menu :/

    Cheers!
    Yigit

    April 14, 2015 at 1:40 pm #428205
    Michael

    I used the code above for the sticky header on mobile and it works. Problem I am having is that the top portion of content from each page is now hidden under the menu. Any way to fix this?

    April 14, 2015 at 2:30 pm #428230
    Yigit

    Hey!

    Please try adding following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
.responsive #top #main { padding-top: 80px !important; }}

    If that does not work, please post the link to your website

    Regards,
    Yigit

    • This reply was modified 9 years, 7 months ago by Yigit.
    April 14, 2015 at 2:34 pm #428233
    Michael

    It did not seem to work. My webs address is https://www.smartstartinc.com/texas-ignition-interlock/

    April 14, 2015 at 2:39 pm #428236
    Yigit

    Hey!

    I edited the code i posted here – https://kriesi.at/support/topic/sticky-nav-for-mobile/#post-428230
    Please try it now, if that does not work as well, please add following code to Functions.php file in Appearance > Editor

    function add_custom_padding(){
?>
<script>
jQuery(window).load(function(){
jQuery('.responsive #top #main').css('padding-top','80px');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_padding');

    Best regards,
    Yigit

    April 14, 2015 at 2:42 pm #428241
    Michael

    The updated code you created above worked perfectly. Thanks.

    April 14, 2015 at 2:46 pm #428243
    Yigit

    Hi!

    You are welcome, we are always happy to help :)
    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Sticky Nav for Mobile’ is closed to new replies.