Fixed header not woring on mobile devices

  • Hi,
    I’m building my first site with the Bento theme and so far it really lives up to my expectations. But I have run into one issue I just can’t seem to resolve.
    I have set the header to be fixed and it works just fine for larger viewports, but for tablets and mobile devices the header doesn’t stay fixed. The breaking point seems to be somewhere around 1200 px. I want it to be fixed for small viewports as well. Is there a setting somewhere for this that I have missed, or can I fix it somehow in style.css (I’ve made a child-theme so I won’t be messing with the original files in that case).

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter gloofer

    (@gloofer)

    Fixed header not WORKING on mobile devices (of course, sorry for the typo)

    Theme Author satoristudio

    (@satoristudio)

    Hey @gloofer,

    thank you for choosing Bento!

    the fixed header is only envisaged for the full-width view in the theme – i.e. it is not supposed to work on mobile screens: during testing we’ve found out that such functionality would be burdensome to the UI and does not work well with the mobile-optimized sliding hamburger menu.

    Sincerely,
    Andrii / Satori Studio

    Thread Starter gloofer

    (@gloofer)

    Ok, thanks for your answer. But the breaking point of 1280 px seems a little large to me for mobile devices. I thought of decreasing it a bit (to, say 1024 px). Can this be done somewhere in a css or js file?

    Theme Author satoristudio

    (@satoristudio)

    Hey @gloofer,

    the mobile breakpoints have been reduced to 1024px following user requests in Bento version 1.7 – please try updating your instance of the theme to the latest version and clearing your browser’s cache for the change to take effect.

    Sincerely,
    Andrii / Satori Studio

    Thread Starter gloofer

    (@gloofer)

    Strange, I have version 1.7.3?
    Anyway, by setting “$str(window).width() > bentoEmValue(0)” in theme-scripts.js I managed to get the fixed header on mobile devices as well, but there was a z-index problem with the transparent menu feature making the fixed header stay on top of the mobile menu. Since I’m okay with not using the transparent feature I simply turned it of on the start page and everything now works the way I want ??
    I know this is not an optimal solution since any theme update will overwrite this, so my next question is does Bento support wp_enqueue_script, so that I can set this function in the child-theme instead?

    Theme Author satoristudio

    (@satoristudio)

    The new breakpoint should already be working in 1.7.3 – it’s possible that your browser (or a WP caching plugin, if installed) has cached the old files – you can try purging all possible caches mentioned above and testing the website from a different machine.

    Regarding the wp_enqueue_script function – Bento adds all scripts using that one, as per www.remarpro.com best practices, so it’s pluggable via a child theme (which is the preferred method of theme modification). The handle on the main theme script file is bento-theme-scripts.

    Sincerely,
    Andrii / Satori Studio

    Thread Starter gloofer

    (@gloofer)

    Ok, thank you very much for fast and rigorous answers!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fixed header not woring on mobile devices’ is closed to new replies.