Shrink Sticky Header after Scrolling

[RickyWolff]

Hey there.

Loving the theme!

I was just wondering if it is possible to shrink the sticky navigation header after the user starts scrolling? And then when they scroll back to the top of the page, the header should become the normal size again.

I'd greatly appreciate if you could help me!
Thanks!

[christian_y]

Hey @RickyWolff,

Yes, that is possible with Pro. Simply lower the Shrink Amount and your Header bar will shrink upon scrolling down and return to normal height when you scroll to the top.

For more header and footer building tips, please see our Header and Footer Builder Introduction video. I'd also recommend you check out the rest of Pro tutorials in our Knowledge Base.

If you're using X, regretfully, this is not possible.

Thanks.

[RickyWolff]

Perfect! That is exactly what I was looking for!

[RickyWolff]

Is it also possible to just do this on mobile? On web it is not needed for example.
I can make two banner. One that only displays on mobile. But is that bad for SEO to have two banners of the same content?

[Prasant]

Hello @RickyWolff,

Thanks for updating the thread.

You can have 2 banner that displays on desktop and mobile separately and hide the same using Hide During Breakpoints feature.

Regarding SEO, I don't think it should have any impact on the SEO. See, when I comes to SEO primary stuff that a webmaster should focus is the content which should be of high quality. Content is and will always be the king. Next, comes weather website is loading fine on mobile/responsive devices or not. Over here you are already in good hands as X Theme and Pro Theme are extremely responsive themes. Then comes the page load time which depends on a lot of factors. However, here also X and Pro Theme are very fast when it comes to load time.

All in all, I would suggest you focus on the fundamentals, make sure the content has right keywords that you think users are going to type, website is loading fast and SEO should fall in place. I also suggest you to take advantage to Google webmaster console. It's a free and amazing tool that you should use to get more insights on your website.

https://www.google.com/webmasters/#?modal_active=none

Here's a getting started guide.

https://neilpatel.com/blog/beginners-guide-to-google-webmaster-tools/

To understand SEO more deeply and fundamentals of SEO, I suggest you to watch Google webmaster videos and especially one's featuring Matt Cutts (former head of Spam at Google). They are really nice and informative. For example, take a look at this video on the things a website owner can do to rank better. Please don't get mislead by the title, it's a good video:

To get some help on optimizing the speed of the website, please take a look at following article.

Customizations - Performance

This article was last updated on the January 2, 2017. To better equip you with specific performance enhancement techniques, we have put together this article and will use it as a foundation to build upon. As a company we are committed to performance and keeping things as efficient as possible. While there are only so many things a theme can do to optimize for performance, the vast majority of performance improvements will be seen by properly setting up and configuring some of the options discu…

Hope that helps.

Thanks.

[RickyWolff]

This is great!! Thank you so much for this!!

[Prasant]

You are most welcome.

[system]

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.