Menu jumps to the bottom at ~960px width

  • Resolved Hansig

    (@hansig)


    9 years, 6 months ago

    Hi

    The Author Theme (version 1.11) changes from the always-visible menu to the top bar around the 960px-width mark. But shortly before it changes to the top bar, the menu and widget areas get moved out of the sidebar, to the bottom of the page.

    This is especially problematic for me, because I would like to change the threshold for the activation of the top bar. I would like the sidebar to still be visible when you use half of a full-hd screen for your browser. As it is, that does not seem to be possible without the problem occurring. (The problem I described also comes up without any modifications though, but only for a few pixels of width)

    I already found out that if I set the limit of when the top bar will appear really low, the menu will move back to the correct position at around a browser width of ~540px and lower.

    Do you have an idea how to fix that?

    And a follow up question:
    If I simply change all of the 59.375em thresholds to something lower, I get the behavior I want (other than the disappearing menu). Is this an acceptable way to do it, or is it likely that it will break something else?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Thanks for choosing Author!

    If you check out the live demo of Author, you’ll see this isn’t an issue inherent to Author, but rather with the customizations being made.

    The way Author’s sidebar works requires the use of Javascript, and the JS file also makes use of the 950px width. You’ll want to change these width values in the JS files as well as in the CSS media queries.

    The best way to do this would be to “dequeue” Author’s main JS file (ct-author-js) with your child theme, and enqueue your own JS file that is a duplicate of the functions.js file in Author, but with the 950 values changed.

    Here’s an overview of how to do that: https://wordpress.stackexchange.com/questions/26822/how-to-override-javascript-files-in-child-theme

    Thread Starter Hansig

    (@hansig)

    It’s not unlikely that I am doing something wrong here, but I actually tested this with the live demo. I tried Chrome, Firefox and Internet Explorer. Also a second PC. The result is always the same. Here is a screenshot, with the resolution at the top:
    https://i.imgur.com/jPHPTRL.png

    While making the screenshot, I found another, similar issue. When making the browser even more narrow, the search field jumps to an unwanted position on top of the menu. This happens shortly before the layout switches to the smallest top bar (the version with no picture and no secondary message). Again, this happens in the live demo.

    View post on imgur.com

    Theme Author Ben Sibley

    (@bensibley)

    Hmm okay after some research this appears to be a PC specific issue. I can’t recreate any of these issues on a mac (video: https://pics.competethemes.com/0e1k2v3K3y3u), but I was able to recreate them on a PC running chrome.

    The sidebar functionality is based off of the twenty fifteen theme, and I found it has some issues as well within 10px after switching to the sidebar layout.

    I’ll find a fix for this in the next version of Author. For now, the good news is that this only affects PC users viewing the site at 950-960px wide which will be a very small percentage of visitors.

    Theme Author Ben Sibley

    (@bensibley)

    UPDATE: I figured it out. Internet Explorer and some browsers on PCs used the scrollbar in its calculation of screen width which was different than the CSS value. This caused the small ~15px range of screen sizes that weren’t working properly.

    I’ll be submitting a fix in the next update which will be available for download soon.

    Thread Starter Hansig

    (@hansig)

    Just tested it and it seems to work fine now. Great support, thank you very much.

    Theme Author Ben Sibley

    (@bensibley)

    Awesome glad to hear it!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu jumps to the bottom at ~960px width’ is closed to new replies.