Nav bar blinking

[Monaco_Schranze]

Hello,

I’m by far not well-practised with CSS /JS /PHP – therefore it’s quite hard for me to explain the issue or source the problem, which keeps me on the run since a couple of days. Since I’ve updated Chrome, the navigation bar is blinking permanently. The problem occurs only with newer versions of Chrome and Firefox.

According to firebug the height of the nav bar is always jumping. Honestly, I’ve no idea how I set up the nav bar in the past. I’ve added following JS in order to hide the header on scroll down and show on scroll up:

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > mypos)
    {
       $('#full-menu').slideUp();  
    }
    else
    {
        $('#full-menu').slideDown();
    }
    mypos = mywindow.scrollTop();
 });

At the beginning everything worked fine, but recently this annoying blinking issue occurred.
I’m more than grateful for any help!

The site is passion-pac.com.

Thanks,
mirko

[droopsnoot]

Might be better in the JS section, I can’t see the connection to PHP, though I stress I’m not a PHP expert.

[chrisofarabia]

I’ve been having a bit of a look at what’s going on, and I suspect the blinking is tied into how far you scroll down the page. I found that if you just scroll one mouse wheel click, it will stop blinking after something like 20-25 redraws. The more you scroll, the bigger the number gets, until for all intents and purposes, it’s continuous.

The other thing I notice is that the page weight is in the order of 10Mb, which seems high, even for an image intensive look like the one you have. The HTML/CSS/JS comprises around 1.8Mb of that, with the rest being images The page takes around 8s to load and many people will exit before that’s completed.

This is the file info for the largest of your image files - it’s enormous!

In reality, you’re presenting a 4,600 x 3,500 px image at around 660 x 500px. Assuming that this kind of size imbalance is going on across the remaining images, I’m not at all surprised at the page load times you’re getting. There’s a real need to optimise your image heavily.

Back to the blinking though, I just wonder whether the page size is making the JS you’ve put in struggle, as it does work eventually.

Work on getting the images much smaller and see whether that doesn’t improve things.

[PaulOB]

Hi,

At line 289 in the main page you have this css:

nav#full-menu {
    display:block !important;
}

Therefore when you scroll the page your js slides the menu up or down but it is never hidden because the css overrides the inline js that slideDown uses to hide or show the menu and soon as the routine finishes the menu is always revealed.

If you remove that CSS above then the menu will stop flashing. It looks as though that code is in place for a mobile menu but I didn’t see it clicking in in the desktop so you will need to check what you are doing there.

You should also probably stop the slide down from working too hard by stopping the animation.

e.g.

$('#full-menu').stop().slideUp();

and

$('#full-menu').stop().slideDown();

Generally with scroll events you would want to throttle them by setting a timeout or similar but you will need help in the js forum for that.

[Monaco_Schranze]

@PaulOB

At line 289 in the main page

Hello,

many many thanks for your assistance! Unfortunately I’m too dumb to find line 289 - I can spot the

nav#full-menu {
display:block !important;
}

tag (line 268) in my index but have no idea which script I should use to overwrite or delete it. I’ve never edited an index file, and can only find a couple of index.php’s in my WP-folder.

Sorry, but it has been a while since I’ve been in touch with CSS the last time and I never got illuminated.

Thanks for your helpful support!

Regards

mirko

[PaulOB]

Hi,

I’m sorry I don’t do wordpress so can’t help with adjusting and finding wordpress files as such. I can move the thread to the wordpress forum if you need help in working with the files.

As a stopgap you could change your js (which I assume you managed to add) and then add a little css to your custom css file as follows.

var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
    if(mywindow.scrollTop() > mypos)
    {
       $('#full-menu').addClass('menu-hidden');
    }
    else
    {
        $('#full-menu').removeClass('menu-hidden');
    }
    mypos = mywindow.scrollTop();
 });

The above replaces your slidedown script and uses css to hide the element instead.

Then you will need to add this css to your custom css file which I assume you know how to edit.

 #full-menu{
 transition:all .5s ease .2s;
 top:0;
 position:relative;
 }

 #full-menu.menu-hidden{
     top:-10em;
 }

If you don’t know how to edit your wordpress files then you probably need to ask that question in the css forum specifically.

[Monaco_Schranze]

You’re my new hero!!!
Thanks mate, your codes worked like charm.
I’m the happiest man alive.
Best wishes
mirko