Mobile Sticky Nav

Home Forums Jevelin Theme Mobile Sticky Nav

Home Forums Jevelin Theme Mobile Sticky Nav

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    RESOLVED Posts
  • Can there be an option for stick header/nav on mobile viewport?

    Hi @spfskyline,

     

    I hope you are well today and thank you for your question.

     

    It is disabled on mobile view because it makes the menu items in accessible when the menu contains too many menu items.

     

    But if you want to enable it then you can try changing it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    
    
    .sh-body-header-sticky .sh-header-mobile {
    position: fixed!important;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 5000;
    }

     

    Best regards,
    Shufflehound team

    Thanks. Appears to work, but needs to shift from light version header to regular header as on scroll like desktop does. With sticky header logo and 100% opacity background.

    See http://hampleinsurance.com

    We have to develop custom javascript code to make it happen on scroll which will take time but you can always display it light black by also using the below CSS code so that it will match with the mobile dropdown nav.

    .sh-body-header-sticky #header-mobile {
        background-color: #232323 !important;
    }

    Thanks. That will work for now. If it can be coded and become an option, that would be preferred.

     

    You are most welcome here 🙂

     

    Sure we will add it in our to do list as a feature request to implement in the future version of theme.

    Looking forward to it.

    We created beta version, where you can enable sticky mobile header under Theme Settings > Header.

     


    Please login to access this file

     

    Let us know how it works.

    Beta uploaded and found the toggle in Theme Settings > Header. Cleared browser cache and removed previous custom CSS, but does not appear to be working. You can view site if you need to debug.

     

    http://hampleinsurance.com

    Disregard. I had to clear all caches in W3 Total Cache plugin. Works, but is not flush to top of browser window. Appears to load slightly larger too.

     

    Screen Shot

    Thank you for letting us know this.

    Tomorrow we will create a new version, which should to fix this issue.

    I was able to fix this by adding the following CSS

     

    #page-container .sh-sticky-mobile-header {
    margin-top: 0px !important;
    }
    

    Awesome great to see you got that fixed.

     

    Please advise if you have more questions.

     

    Have a fantastic day!

    Is it possible to have mobile nav collapse on click? It stays open after selection and has to be manually closed. Not the best user experience.

    We will consider to add this feature in future versions.

     

    In mean we updated Jevelin theme version in Themeforest, there we fixed top position issue and officially added sticky mobile header option.

    Thanks! Assuming it requires custom JS to do.

    Updated to 2.2.0 and noticed some odd page loader behavior. If I remove the custom CSS I had added for mobile sticky nav, page loader gets stuck on mobile (appears intermittent on desktop). Doesn’t happen if custom CSS is in place. Doesn’t make much sense. Could be a cache issue. I’ll try again after clearing browser cache or using a new device.

    Please let us know if you managed to fix it by clearing cache.

    It appears to be working fine.

    Thanks!

Viewing 18 posts - 1 through 18 (of 18 total)