[Resolved] sticky navigation logo

[Gonzalo]

Hi there!
to scroll down with sticky navigation, I need the same image feature like original logo page.
I use this custom css:

.site-branding, .site-logo {
    position: absolute;
    z-index: 200;
    top: 5%;
}

Can you help me?
Regards

[Jacob]

hey
Maybe this link help you
https://docs.generatepress.com/article/navigation-logo/

[Gonzalo]

thank you kobi, but not work with this info 🙁

[Jacob]

Gonzalo
You are using GP Premium?

[Gonzalo]

absolutely yes 😉

[Jacob]

https://docs.generatepress.com/article/sticky-navigation/

[Tom]

Hi there,

That’s a bit of a tricky one.

What if you used the “Navigation as Header” option?: https://docs.generatepress.com/article/navigation-as-a-header/

It will likely take some tweaking, but that along with the “None” sticky navigation effect should be the solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gonzalo]

thank you. But the issue it’s about float logo.
I need this:
https://prntscr.com/qq99zx
to scrool:
http://prntscr.com/qq9asn

it’s just a css detail 😉

[Tom]

You could try this:

.navigation-branding {
    position: absolute;
    z-index: 200;
    top: 5%;
    width: 100px;
}

.navigation-branding img {
    height: 100px;
}

.navigation-stick #primary-menu {
    margin-left: auto;
}

However, you’ll likely end up with a better result if you use the method I mentioned above 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gonzalo]

thank you Tom, Navigation as Header in this site no work.
I have another GP site, working fine with this logo scroll down issue:
https://velvetconsultores.com/

I use the same css, but nothing happens :/
Regards

[Tom]

Hi there,

I’m not seeing the CSS I provided on your site – where did you add it?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Gonzalo]

Tom, please check it again 🙂
I add a little change in you css:

.navigation-branding {
    position: absolute;
    z-index: 200;
    top: 5%;
    width: 100px;
}
.navigation-branding img {
    height: 100px !important;
    padding: 2px 0 0 0;
}
.navigation-stick #primary-menu {
    margin-left: auto;
}

Working, thank you for your help!

Regards

[Tom]

No problem! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts