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]

This reply has been set as private.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[McNitefly]

This reply has been set as private.

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[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