Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #403084

    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

    #403443

    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

    #428205

    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?

    #428230

    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 8 years, 10 months ago by Yigit.
    #428233

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

    #428236

    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

    #428241

    The updated code you created above worked perfectly. Thanks.

    #428243

    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

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