rendering issue when resizing

Question

I'm using bootstrap 3.3.7 and I use the standard bootstrap classes to create a menu. I've restyled it so that the color is set to white with a purple backcolor. All is fine when the page is initially loaded. As I reduce the screen width with the mouse, my menu starts to collapse down as expected, but the menuappears to disappear. If I stop reducing the screen size and I then move my mouse over where the menu should be at that point it comes back into view. So the action is working, the menu isn't keeping it's color scheme whilst being moved. Have a missed a trick somewhere?

I get the same issue if I size my screen to e 767 such that my 'hamburger' button appears for the menu. I click the hamburger and nothing seems to display until I move my mouse over the left of the screen where the menu is.

Answer 1

When you resize you viewport size with your mouse, the end result is not always correctly shown because of the javaScript working on that resize.

Try to use only the specific window sizes given: Ipad Pro, Ipad, etc. After selecting use a CTRL + F5 or CTRL + SHIFT + R for a hard refresh, and afterwards tell me if the problem persists.

Also, check the built-in styles from bootstrap, it may change when you are on a tablet or mobile device.

Answer 2

codepen.io/bilpor/pen/gjRQgj

So after seeing the codepen, this is the desktop result. This is the menu before I hover over it.

And this is the image after I hover over elements.

Regarding your issue, use you javascript code to run only on desktop.

  $(document).ready(function () { if (screen.width < 1024) { // your code that affect navbar here } else { alert(Error!); } });