Support » Theme: Bento » ‘Fixed header’ not working on mobile view

  • Hello,
    when I turn on checkmark on ‘fixed header on scroll’ under WP Admin > Appearance > Customizer > Site Elements, the header behaves as fixed (sticky) only in desktop view, but not on mobile view.

    I noticed the ‘stickyness’ of the header in Bento theme is being produced by the .js file \themes\bento\includes\js\theme-scripts.js:94,394, and what it does is it basically clones the entire header over the existing one ($bento_headerClone), and mandatory hides the original header by rendering opaque background color div over it.

    Please help me get to trigger the same cloning of the ‘sticky’ fixed header in the js file also in the mobile view of the site, not just in the desktop view.

    This feature issue is easy to inspect on the live demo page of the theme – https://satoristudio.net/bento/full-width-classic-page/. To recreate the issue, it is important not to simply resize the browser window, but to view it on actual mobile device. Because if you trigger the ‘stickyness’ of the header on the desktop view, when resizing, the rendered DOM might remain in browser and succesfully show on the resized ‘mobile’ view of the browser, however it is a false representation of the view, it is not authentic.

    Thank you kindly in advance,

Viewing 1 replies (of 1 total)
  • Thread Starter 528491

    (@528491-1)

    I seem to got it to work. I simply removed the requirement of $str(window).width() in the file \themes\bento\includes\js\theme-scripts.js:94,394. So instead of the lines:

    // Fixed header on scroll
    if ( bentoThemeVars.fixed_menu == 1 && bentoThemeVars.menu_config != 3 && $str(window).width() > bentoEmValue(64) ) {

    and

    // Fixed header
    if ( bentoThemeVars.fixed_menu == 1 && bentoThemeVars.menu_config != 3 && $str(window).width() > bentoEmValue(64) ) {

    I edited them into:

    // Fixed header on scroll
    if ( bentoThemeVars.fixed_menu == 1 && bentoThemeVars.menu_config != 3 ) {

    and

    // Fixed header
    if ( bentoThemeVars.fixed_menu == 1 && bentoThemeVars.menu_config != 3 ) {

    So far it works good and it succesfully triggers the fixed header ‘stickyness’ in the real mobile view scenario.

    I would like to know, however, if the developer of the theme could please inform me what does the requirement

    && $str(window).width() > bentoEmValue(64)

    do exactly? Why was it necessary along with other 2 requirements
    (bentoThemeVars.fixed_menu == 1 && bentoThemeVars.menu_config != 3)?

Viewing 1 replies (of 1 total)
  • The topic ‘‘Fixed header’ not working on mobile view’ is closed to new replies.