[Resolved] Effects in the sticky bar

[Diogenes]

Hi.

It is possible that the sticky bar of generatepress shows the effects that are seen on this page, especially the logo that shrinks and becomes large depending on the scroll, as well as smoothness in transitions.

Thanks in advance.

GeneratePress 2.1.4

GP Premium 1.7.2

[Leo]

Hi there,

Been meaning to write an doc article on this…

This can be done by following the steps here:
https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

Then set the sticky navigation height to something smaller than the static navigation height:
https://docs.generatepress.com/article/menu-item-height-width/
https://docs.generatepress.com/article/sticky-navigation/#menu-item-height

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

The transition effect is very good.

The only thing I notice is that when the logo is much wider than high (like my logo = 281×27) it stretches totally and looks very bad, this trying to make the height of the navigation bar at least 72px high.

Is there any way for the logo to maintain the original proportion?

[Leo]

Can you link me to the site in question?

You can edit the original topic and use the private URL field.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

Edit the post and add the link.

[Leo]

Not quite sure what you mean.

Your logo image is only 27px in height:
[link removed]

So when the static navigation height is set at 74px, it image will look blurry because it’s zoomed in.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

I already solved it, create a logo with more height.

You can delete the link from my website, it is a current project and I do not want it to be shown.

Thanks for the help.

[Leo]

The link you provided in the original topic is a private link so only admin of this site can see and not to public.

I’ve removed it anyways 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

I refer to the link where references to the image of my site:

https://generatepress.com/forums/topic/effects-in-the-sticky-bar/#post-696689

Anyone can see it.

[Leo]

Ahh missed that.

Removed.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Diogenes]

Thanks Leo for your help.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts