[Support request] Float Logo and adjust size and position keeping it responsive

[Bradley]

Hi Tom,
I want to touch on this one again. I want to migrate a site I have in themify to generate press/elementor
I want my logo to “float” on top of the menu bar. In other words put a logo on the bar that is bigger than it’s default size and not make the menu bar or header change size. Just float it above. To really make it fun I also want it to remain relevant to the width of the container displayed in the body. in other words if I set the site container size to 1100 I want it to remain always affixed to the left hand side of the container…….. Any help appreciated.

Brad

[Tom]

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

[Bradley]

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.

[Tom]

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 🙂

[Hugo]

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.

[Tom]

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 🙂

[Hugo]

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?

[Leo]

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/

[Hugo]

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.

[Leo]

Are you using the navigation as header?

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

[Hugo]

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

[Leo]

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

[Hugo]

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.

[Leo]

Try this to change the sticky only logo size:

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

[Hugo]

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!

[Author]

Posts