Docs

[towertimbers]

Having issues with the header on my site when scrolling down – when the user scrolls in chrome or safari there is a noticeable “flicker”

Any suggestions on how to deal with this?

Cornerstone version 1.3.3
X version 4.6.4
Wordpress 4.7

[Nabeel A]

Hi there,

Thanks for writing in! Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[towertimbers]

Thanks so much Nabeel, but unfortunately the problem is still occurring. Any other thoughts?

[towertimbers]

This reply has been marked as private.

[Paul R]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[towertimbers]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > Edit Global CSS in the Customizer.

body .x-navbar.x-navbar-fixed-top {
    margin-top:0;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Hope that helps.

[towertimbers]

This worked perfectly – thank you for your help!

[Nabeel A]

Glad we could help 🙂

Cheers!

[towertimbers]

Bumping this thread – the code above worked beautifully for the desktop navbar, but has now resulted in both this navbar AND the mobile navbar showing on mobile devices. Any suggestions for how to avoid this issue?

[Christopher]

Hi there,

You have duplicated code, please find and remove one of the following code :

.x-navbar {
    background-color: transparent;
    margin-top: -90px;
}

Update the other one to :

@media (min-width:979px){
.x-navbar {
    background-color: transparent;
    margin-top: -90px;
}

}

Update this code to :

body .x-nav-wrap.desktop {
    float: left;
    display: block;
    width: 100%;
    max-width: 1920px;
}

To :

@media (min-width:979px){

body .x-nav-wrap.desktop {
    float: left;
    display: block;
    width: 100%;
    max-width: 1920px;
}
}

Hope it helps.

[towertimbers]

Works like a charm and now only have one navbar on mobile, but the navbar background on mobile has switched to transparent rather than black?

[towertimbers]

Unfortunately the screen flicker has come back too when you scroll on desktop.

[Christopher]

Hi there,

Please find and close curly bracket for following code :

@media (min-width:979px){
.x-navbar {
    background-color: transparent;
    margin-top: -90px;
}

Add this as well :

body {
    overflow: hidden;
}
@media (max-width:979px){
.x-navbar {
    background-color: #000;
}
}

Hope it helps.

[Author]

Posts