Docs

[Studio172]

Hello, I’m new to working with your theme, until now everything went very smooth! Great theme!

I have a little problem which you can see here:
http://frank.pilihan.nl

The page makes a little jump when the fixed menu reaches the top. It works correctly when the width is bigger than 979, but you can see the little jump if the menu is collapsed.

How can i fix this?

greetings, Stefan

[Rue Nel]

Hi Stefan,

Thanks for writing in! Since you are using SiteGround, could you please disable the supercacher in your hosting panel? The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

Hope this helps.

[Studio172]

Hello Rue, thanks for your fast reply!
I have disabled the supercacher in the SiteGround environment, but that does not seem to help…
page still jumps…
greetings, Stefan

[Rue Nel]

Hello Stefan,

I have investigated your site further and it turns out that there is a duplicate ID “wat”. Please keep in mind that an ID should be unique and that there should be no duplicates for the ID. Please edit your page and double your ID names. You should remove the other instance of the “wat” ID and make sure that it should be one and only.

Hope this helps. Kindly let us know.

[Studio172]

Hello Rue,

Thanks for again a fast reply and detecting an error on my part!
I have fixed it, but sadly it does not solve the problem…

do you have any further ideas?

greetings, Stefan

[Studio172]

And one more question… how can i disable the red box in the menu (feedback where the user has clicked the last time)?
I also get this red box at links that have been visited.

[Paul R]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

a:focus,
select:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="submit"]:focus,
input[type="checkbox"]:focus {
    outline: none !important;
}

Hope that helps.

[Studio172]

Hello Paul,
Thanks great! That script did the trick for the red box!

But sadly the first problem still exist… (:The page makes a little jump when the fixed menu reaches the top. It works correctly when the width is bigger than 979, but you can see the little jump if the menu is collapsed.)

Do you have any suggestions for this problem?

greetings, Stefan

[Nabeel A]

Hi again,

To fix the issue, add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	$(".x-navbar-fixed-top").parents('header.masthead.masthead-inline').css('height', $('.x-topbar').height() + $('.x-navbar').height());
});

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

[Studio172]

Hello Nabeel, I’ve added the script, but it doesn’t seem to fix the problem…

[Nabeel A]

Hi again,

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.

[Studio172]

This reply has been marked as private.

[Nabeel A]

Hi again,

Thank you for providing the credentials. I modified the code and added it in your Customize > Custom > Edit Global JavaScript section. It looks like it’s fixed now. Please clear your browser’s cache and reload the site.

Cheers!

[Studio172]

Hello Nabeel!

Great! You’re the best!
What did you do exactly? Alter a css with jQuery? What exactly is the masthead?

Thanks a lot for the great service!
Stefan

[Nabeel A]

Hi again,

I added the following script in your Customizer:

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();
});

And this CSS in your Child Theme:

@media screen and (min-width: 783px) {
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
    top: 32px !important;
}
}
@media screen and (max-width: 782px) {
.admin-bar .x-navbar-fixed-top, .admin-bar .x-navbar-fixed-left, .admin-bar .x-navbar-fixed-right {
    top: 43px !important;
}
}

masthead is the class name of the header. We’re glad we could help you 🙂

[Author]

Posts