Sticky header stuttering on scroll > need it fixed (in pro)

Support
#23

Ive checked out your videos, and yes it might have to do with 3th party scripts. BUT, with some of them enabled, > the problem is gone with Chrome. i agree completely.

This issue now resides in Firefox. Now look, i recorded a gif, with your test page, with all plugins disabled… and in firefox > the problem occurs…

Weird weird, empty page, no extra balast scripts (if those would be the cause), still weird stuttering.

ps. excuse me for my heated previous reply, i was kinda frustraded cause the page is now delayd for going live.
I really appreciate all the help you and the team is putting in to fix this.

#24

We understand that it’s frustrating.

It looks like we need to take into account the screen size also and this is more pronounced in Edge. Please see the secure note. As you can see in my previous investigation though, extra scripts adds to the issue.

Regretfully, we’re back in square one. I could not investigate further as support and will need post this in our issue tracker so our development team would be made aware. They will need to know this and what we can do as support staff is replicate the issue and report.

For now, you have only 3 options:

  1. Use you’re current setup with this behavior
  2. Revert to the original or the intended behavior of the bar which is “with animation”. Set the Trigger Offset to greater than -1 and set the Shrink Amount to 1.
  3. Use the Classic Header.

We kindly ask for your patience and understanding regarding this matter.

Thank you.

#25

I hope it’s okay to reply here in the support forum, rather than in the user forum. I’m having the same issue on several sites. Here’s a couple https://mved.utah.gov/ https://tax.utah.gov/

If this will help you diagnose it, it seems to be related to viewport size. If the page content is slightly larger than the viewport height, then the jumpy problem arises. If you shrink the viewport height, so the content goes much farther below the viewport, the problem goes away. And obviously if the content is shorter than the viewport, there’s no issue because no need to scroll.

And as @creativeG has seen, if you turn off sticky headers, there’s no problem. I’ve disabled pretty much every extension and that doesn’t make a difference. I’m testing on a Mac, and it only happens in Firefox.

PS: I can’t give you login credentials to my sites because they’re government sites behind a firewall.

#27

thanks for the reply man! appreciated.

Well viewport or not, im viewing it on an (fulldhd) 1920x1080 monitor resolution, and it only occurs at firefox and edge at the moment. but i can live with it since ive tried everything already lol.

Most is important is turning the visitors into clients after launch :slight_smile: the help was incredible good from Xtheme! props!

cheers.

#28

Thanks for your feedback, @taxwebmaster. I have posted this to our issue tracker so our development team would be made aware of your concerns.

#29

Thank you for your patience and understanding, @creativeG.

#30

Hey there, I don’t wanna open a new topic for this request so ill ask her instead to keep it clean :slight_smile:
i’d like some help in some css styling, i think its easy for you guys but i cant seem to figure it out because the footer builder keeps pushing me back to start…

#31

Hello There,

Thanks for updating in!

1.) It may not be possible because the particles has it’s own width which you can set in the settings.

2.) You are using custom text content. The distant between the icon and the text is controlled with the amount of blank space or space character. You can edit the text element and add more spaces in between. At the moment, it is single space. Perhaps if you double or triple it, the text will display more to the left side.

Hope this helps.

#32

Thanks for the replies!
But that doesn’t bring me the solutions that i need, as i knew the spaces part, but telling me to use spaces… is not a good practice.
2. I need to have some technical css solutions for this as i need it spaced out and stay responsive for all sizes.
as for 1. i just need a simple underline for links hover, doesn’t need to be particles… i couldnt find an other solution.

#33

Hey @creativeG,

For #1. You will need to target the text content for this case. I’ll give you a CSS example but please note that we will not provide continual support for this like fixes and enhancements. Add this code in the Navigation Inline’s Element CSS.

$el .x-anchor-text {
  padding-bottom: 2px;
}

$el .x-anchor:hover .x-anchor-text {
  box-shadow: 0 4px 0 black;
}

See https://youtu.be/73DvNUGiNIE

For 2. I’m sorry but I can’t picture out what you want. Would you mind providing us a screenshot or screenshots of what you want to achieve in desktop, tablet and mobile?

Thanks.

#34

Thanks!
I’ll try nr1 out!

for 2, here is an example with explanation… (currently situation is with allot of spaces… which dont looks nice…)

#35

The setup you need would require both custom CSS and HTML. I would instead recommend that you use the Headline and Button elements. Both does have a Graphic Icon option and on top of that, you will have more options.

See https://youtu.be/ibwgNz0pxgI

#36

Thanks buddy! I thought of using single headlines over and over instead of css, but wouldnt that be ‘to bulky’ ? as in, it would slow the stuff down cause it needs to load all the options it has eventually?
appreciated!

#37

The Headline element or the elements in general does have a few extra markup compared to if you use custom HTML and CSS. But the thing is, Pro abstracts the cons of coding. There is a trade-off between performance and ease of use and added features.

And, custom coding is not a part of our support service. There is a difference between the user using the tool and the user requesting a custom service or utilizing man power. And, our output and focus as support staff should be on teaching the users how to use the tool.

For 4 items though, the extra markup would be negligible in terms of page weight.

Thanks.

#38

I managed to get it right! i’ve used UL and LI , and then styled it a bit with some css! thanks for the pointers, those are very helpfull guys!

@christian_y Another thing, regarding responsive collumns… please, tell me what is going wrong here?

the text is going outside of the collumns when in smaller sizes, I would have think the text would make itself fit by going a line under… but now its going outside … I dont need that.

hope i explained it well… Thanks!

#39

Hello There,

The issue is because of the widths of the headline element. You have set it to 220px. Please adjust it to at least 180 pixels.
Feel free to decrease it if needed.

Hope this helps.

#40

No, 180px kills the layout of the other sizes… I tried all of them, 220 is good.

This error/issue only occurs on Chrome browser… Look at Firefox and resize it… it works flawless, its responsive on the size.

But not in Chrome :confused: anyway to fix it for that browser?

#41

Hello There,

Thanks for updating in! To finally resolved this, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 1080px){
    .center-list {
        display: block;
    }
}

Hope this helps. Please let us know how it goes.

#42

MY MAN!! worked flawless… im soo close finalizing our site build! Thanks to your help guys!!
:kissing_heart:

#43

You are most welcome!
We’re glad we were able to help you out.