Can I make let the png of the Logo in the header overlap into the body?

[McNitefly]

Dear Kleo-Support,
I’m about to move one of my sites to Kleo. I want to recreate an effect I did in this site: A part of the Logo overlaps into the body. I did this by taking a partly transparent png as Logo picture and displaced it just the right amount via CSS.
Can you please tell me if it’s possible to reach this effect in KLEO, too?
Thanks,
Tom

[McNitefly]

Here’s the link to the site with the effect I want to recreate:
http://www.kindergitarren.info
The leg of the girl in the upper left is supposed to hang into the body of the page.

[Laura]

Hello, this is possible with css, please share a web link with kleo and the logo setup so i can help you with css 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[McNitefly]

OK, finally I’m working on the relaunch.

Could cou please sell me the CSS to get the girl in the logo on this page to overlap her leg above the grey bar? I also attached the file.

http://kindergitarren.staging.wpengine.com

The CSS in general is fine, it does not have to have the exact correct pixels. I’m still tweaking the looks of the page, but I’d like to see if it works our in general.
Thanks for your help,

Tom

[McNitefly]

OK, so I found myself the CSS to let the logo overlap on the bottom:

COPY CODE

.logo img {
  margin-bottom: -66px;
  width: auto;
}

Now the interesting thing: How can I please add a CSS so that the position of the logo adapts when the header collapses when scrolling?

Currently, the logo gets smaller, but is stays too low. I have to ajust the margin-bottom value when the header collapses.

Thanks,
Tom

[Laura]

Hello, i suggest not using the sticky menu if you edit logo position, so everything looks better

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[McNitefly]

Hi Laura,
thanks for the answer. Well, yes, but that would be the workaround.

I would like to use the sticky menu.

Is there a way to change the logo position value cia CSS as soon as the header collapses? The logo itself changes size, so there must be a point to grab on to. Isn’t it possible to add a position value at the same point where the information about the changed logo size is stored?

Thanks,
Tom

[Laura]

Hello, sadly this involves some time that is out of the support scope. I suggest to hire a developer to do it for you 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[McNitefly]

OK, thanks Laura.

Does anybody else here in the forum has an idea how I can address the position of the logo regarding the lower margin in the moment when the header is collapsed into the sticky navbar?
Thanks,
Tom

[Laura]

Hello, i will assign this ticket to a higher support 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[McNitefly]

Hi Linda, hey, that sounds great – thanks a lot 🙂

[Andrei]

Unfortunately achieving what you want in the sticky header will require manipulation of the negative margin while scrolling in the javascript that takes care of the sticky header.

This isn’t a very easy fix to provide so I recommend you to use the position modification without the sticky header.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[McNitefly]

OK, thanks guys for the effort – then I guess I will stick with the non-sticky header.
Thanks for your help,
Tom

[Andrei]

Anytime !

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts