Fixed logo square

[Gonzalo]

Hi there!
I’m designing a new site, with a square logo.
I need this logo like this:
https://prntscr.com/uhuv4m

Also, this site have a sticky menu, therefore, this logo must shrink when going down.

Can you help me with that?

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

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

[Gonzalo]

Thank you Leo, link in edit post 😉

[Leo]

Is there a way to get past that first page which is completely done with Elementor?

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

[Gonzalo]

Sure, check url 😉

[Leo]

I’m still just seeing this:
https://www.screencast.com/t/1fYWnORS

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

[Gonzalo]

I’m sorry Leo, please check it again

[David]

Hi there,

you can use this CSS to position the logo over the site header:

@media(min-width: 769px) {
    .site-header img.header-image {
        position: absolute;
        top: 0;
        height: 180px;
        width: auto;
        z-index: 1;
    }
}

Then add either a Secondary Navigation above header or the Top bar.
You can then set the top: 0; to a top: -30px; to overlap them. Adjust the pixels to suit.

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

[Gonzalo]

thank you David!

[David]

Glad to be of help

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

[Author]

Posts