Tagged: , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 19, 2020 at 5:12 pm #1254094
    October 20, 2020 at 9:04 pm #1254448
    Victoria

    Hey ggoulet,

    Best regards,
    Victoria

    October 20, 2020 at 10:52 pm #1254488
    ggoulet

    Thank you Victoria.

    I made the changes but now the original logo and the shrunk logo are too small…
    I would like the original logo to be bigger (which is why I had 120% before) and when the menu bar shrinks, I would like if the logo could stay the same and that I don’t see an animation of the logo shrinking… The logo I use, the image is 340px x 156px.

    Thanks again!

    October 22, 2020 at 6:28 pm #1255032
    Victoria

    Hi ggoulet,

    Well, you added 120%!important and to the logo, and that kind of broke animation too.

    Please remove that css and check this thread:
    https://kriesi.at/support/topic/make-logo-bigger-3/#post-649831

    If you need further assistance please let us know.
    Best regards,
    Victoria

    February 15, 2021 at 8:06 pm #1280627
    raquelravanini

    Hello, I have a similar issue.
    I also want to have the shrinking header while maintaining logo size. In my case, the logo will be cropped when scrolling. I have managed to do what I need using this custom css:

    .logo a, .logo a img {
    height: auto !important;
    max-height: 118px !important;
    }

    .header-scrolled .logo a, .header-scrolled .logo a img {
    min-height: 80px !important;
    top: -12px !important;
    }

    But the issue is that I would like the logo to transition smoothly to its new position when scrolling, just like the rest of the menu text, not just jump to it as it is happening now. Is it possible?

    Thanks in advance

    February 17, 2021 at 12:36 pm #1281678
    Victoria

    Hi raquelravanini,

    You don’t need to add the css when the header did not scroll and it does not apply anyway, so you can remove this:

    
.logo a, .logo a img {
height: auto !important;
max-height: 118px !important;
}

    Actually, please remove the code that you added and use this:

    
.header-scrolled .logo img, .header-scrolled-full .logo img,
.header-scrolled .logo a, .header-scrolled-full .logo a,
.logo img, .logo a {
    max-height: 90px !important;
    height: 90px !important;
}

    Best regards,
    Victoria

    February 18, 2021 at 2:32 pm #1281999
    raquelravanini

    Hello, thanks for the answer.

    I removed the code I had and used your suggestion, but it’s not working as I need it. At the link bellow you can see the result.

    Now, after the scroll, the logo just gets cropped in half and it’s not changing position. I neet the logo to move up when scrolling so that it occupies the vertical middle of the header, getting cropped in the right position. I need the logo to behave exactly like the text part of the menu, just move up and center.

    Any suggestions?

    Regards,
    Raquel

    February 19, 2021 at 6:49 pm #1282293
    Victoria

    Hi Raquel,

    Please add this code too:

    
.header-scrolled .logo , .header-scrolled-full .logo {
    margin-top: -10px;
}

    Best regards,
    Victoria

    February 20, 2021 at 10:19 pm #1282544
    raquelravanini

    Thansk for your answer.

    I managed to get it working using this code:

    .header-scrolled .logo a, .header-scrolled-full .logo a {
margin-top: -29px;
}

    Best regards,
    Raquel

    February 21, 2021 at 2:36 am #1282575
    Jordan Shannon

    Hey raquelravanini,

    I’m glad this was resolved. If you need additional help, let us know here in the forums.

    Best regards,
    Jordan Shannon

    May 20, 2021 at 6:02 pm #1301475
    JUICYDESIGN

    Hi,

    You should be do two things:

    first: activate shrinking header in theme options
    second:for example, try this css in your (child theme) style.css or put in custom.css:

    #header_main > div.container.av-logo-container > div > span > a > img {
    max-height: 50px;
    margin: 0;
    margin-bottom: 20px;
	transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; 
}
#header {
    max-height: 100px;
    margin: 0;
    margin-bottom: 20px;
	transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out; 
}

    all the best!


    @kriesi     its would fine if You can add this smooth options in header options. default shrink looks like to simple and too hard ;-)

    May 22, 2021 at 4:52 am #1301723
    Rikard

    Hi JUICYDESIGN,

    Thanks for the feedback, and for sharing your code :-)

    Best regards,
    Rikard

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