Float Logo and adjust size and position keeping it responsive

Hi Brad,

Definitely do-able :)

1. Disable your header:

.site-header {
    display: none;
}

2. Upload a logo to your navigation in "Customize > Layout > Primary Navigation" and set it to "Static + Sticky".

3. Set your navigation logo to be absolute so it's not confined to the container:

.main-navigation .sticky-logo {
    position: absolute;
    left: 0;
    top: 0;
    height: 60px;
}

4. Set the height of the image to auto (or whatever you like):

.main-navigation .sticky-logo img {
    height: auto;
}

And here's what you end up with: http://www.screencast.com/t/OpfbO04f9pyV

Very cool! Now how about if I want it hanging over both the top of the menu and the bottom? I added the header back. like dead center of the menu bar bleeding over top and bottom?

Also we were talking about image overlays and I think elementor is doing that by default. Either that or it is wp-posts plugin I am playing with them in dev......they just post the picture name not the category.......half the work is done there though.

Brad

Thaks for this one I just like the look and I think it can be made even cooler than I am wanting it to be with good art.

You would need to add margin-top to the navigation element, the adjust the top attribute above to a negative number like -20px for example.

Play with it a bit and let me know if you need more info :)

HI tom.

I tried to put the float logo in a site.
I put the css that you provided above. It works in a while. I used elementor, and when a put a background image in the first section of the page, the logo float is behind the background image. No the hole logo, but the half is it.

How i can resolve this?

I'm think to put a slider with layer slider. Will be perfetc that solution work with this two escenarios.

Thank for your help as usual.

Hi Hugo,

I would have to see what you have so far to see the issue - I can't quite picture it from your description.

Let me know :)

Thanks tom. I can resolved the problem with the page header add on.
Other question. It's there a way to have a site logo in the main navigetion, and ohter logo in the sticky navigation?

Not sure what your set up is right now but you could potentially use one logo is Customizer > Site Identity and another one in Navigation logo for sticky navigation?
https://docs.generatepress.com/article/navigation-logo/

Maybe i cant explain well. In layout > primary navigation i can select the logo for the static - sticky o both.
Is there a way to assing a logo for the static and other for the sticky?

Or maybe reduce the size of the sticky logo? I need a big static logo and small sticky logo. Thats it.

Are you using the navigation as header?

If not then you can upload a static logo in Customizer > Site Identity

Yes. Im using the navigation as header. The static logo dont show because i disable the header.

Remove your navigation logo in the customizer, then do this:
https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545

Hi Leo/Tom.
Your tips work in a 90%.

I explain what im doing:

Im Merging the Header/Navigation & Content (https://docs.generatepress.com/article/merging-header-navigation-content) It works ok.

Then I put the php code (https://generatepress.com/forums/topic/change-logo-media-source-file-when-sticky/#post-304545) It works Ok

Then I add this ccs:

.navigation-logo.sticky-only {
display: none;
}

.navigation-stick .navigation-logo.sticky-only {
display: block;
}

.navigation-stick .navigation-logo:not(.sticky-only) {
display: none;
}
.main-navigation .sticky-logo {
position: absolute;
left: 10px;
top: 0;
}
.main-navigation .sticky-logo img {
height: 170px;
}

Everything works that i want.
But i want the size of the sticky logo smaller. If i reduce the ccs of 170px to 100px, both logos are in 100px.

Is there a way to do that?

Thanks for yoor awesome support.

Try this to change the sticky only logo size:

.navigation-stick .navigation-logo.sticky-only img {
    height: 100px;
}

Awesome Leo. Works perfect!

Another thing. When switch to mobile view, the main navigation logo is to big. Is there a way to change this logo for other image and do it more smaller and center it?

Thanks lot guys!