Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 7, 2020 at 5:14 pm #1236051
    Niederrhein-Wagyu-9

    Dear Kriesi-Support Team,
    for the site mentioned below (also, I added a temporary login), we experience trouble with the logos. Can you please help?

    Here is what we want to achieve:
    The transparency logo should display exactly as it does right now. The header logo should appear in the shrinking header on scroll.

    This is what currently happens on scroll: The header logo appears below the header on scroll, replacing the transparency logo.

    We have browsed to all relevant threads, but didn’t find a solution yet.

    Thanks in advance,
    Ruven

    August 7, 2020 at 7:22 pm #1236111
    Victoria

    Hey Niederrhein-Wagyu-9,

    Do you mean you want to keep both logos or the logo position is wrong?

    Best regards,
    Victoria

    August 10, 2020 at 9:16 am #1236394
    Niederrhein-Wagyu-9

    Hi Victoria,
    Thank you for getting back to us, sorry if we weren’t clear enough. Let’s give it a second try: we want to keep both logos. The big white one should appear on load, as it does now (below the header bar). The small grey/black one should appear in the shrinking header bar (now it is appearing below the header bar, replacing the big white one in its position).
    Best
    Ruven

    August 11, 2020 at 4:31 pm #1236703
    Victoria

    Hi Ruven,

    Is this the desired behavior for all pages or just for this one?

    Best regards,
    Victoria

    August 15, 2020 at 9:11 pm #1238048
    Niederrhein-Wagyu-9

    Hi Victoria,
    it is the desired behavior for all pages. What we also need to take into account is mobile displays: Currently, the Logos are way to big when the screen width is reduced to e.g. 764 px or below. But tackling this is possible through CSS-styling, right?

    Best,
    Ruven

    August 16, 2020 at 5:10 pm #1238213
    Victoria

    Hi Ruven,

    In this case, it’s better to add the second logo in the widget area in the header, not the transparency logo.

    Here are the docs for you:

    Header

    The add a logo in the widget and add it to the header. Then we can help you adjust it.

    Best regards,
    Victoria

    October 4, 2020 at 2:06 pm #1250407
    Niederrhein-Wagyu-9

    Hi Victoria,
    thank you! I have added the logo in a widget now. Can you help styling it and adding the desired behavior?

    Where we want to get: We want to show an SVG-animation (no loop animation, so a static version shows after it build) that fades on scroll to be replaced by the header logo. At the moment, we use a png file for testing.

    Please find the temporary login below.

    Thanks in advance!

    October 4, 2020 at 7:34 pm #1250477
    Victoria

    Hi Niederrhein-Wagyu-9,

    I see three logos now, what should it look like when the user scrolls the page?

    Best regards,
    Victoria

    October 9, 2020 at 1:07 pm #1251690
    Niederrhein-Wagyu-9

    Hi Victoria,

    Thanks for your answer! There are two Logos, one is the white bigger one that appears on page load. The second is the smaller black one with the added text “Niederrhein Wagyu”. Where do you find a third one? We are planning to exchange the white logo with an animated SVG later.

    what should it look like when the user scrolls the page? On page load, the white logo should show, as it does now. On scroll, the header bar should appear with the black logo in it, the white logo should fade.

    Currently, the header appears on scroll only on the start-page. On the sub-pages, it shows from the start. The desired behavior is the one we have on the start-page.

    Best
    Ruven

    October 13, 2020 at 2:01 pm #1252528
    Ismael

    Hi,

    Thank you for the inquiry.

    You have to edit the pages and set the Layout > Header visibility and transparency settings to the 5th option (Header is invisible and appears once the user scroll down) to replicate the behavior of the header in the home page.

    Best regards,
    Ismael

    October 13, 2020 at 2:02 pm #1252529
    Ismael

    Hi,

    Thank you for the inquiry.

    You have to edit the pages and set the Layout > Header visibility and transparency settings to the 5th option (Header is invisible and appears once the user scroll down) to replicate the behavior of the header in the home page.

    Best regards,
    Ismael

    October 21, 2020 at 4:26 pm #1254698
    Niederrhein-Wagyu-9

    Hi Ismael, thanks that helped. Is there a solution to my second question, too? I described the desired behaviour of the logos in the header and followed Victoria’s instructions – can you now log in via temporary login and help me with the rest? Thanks in advance!

    Best
    Ruven

    October 22, 2020 at 7:54 am #1254873
    Ismael

    Hi,

    Thank you for the update.

    We could use the following css code to hide the white logo on scroll and only display it when the other logo is not visible.

    #media_image-2 {
    display: none;
} 

.av_header_transparency #media_image-2 {
    display: block;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.