Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 6, 2019 at 7:30 pm #1163442
    qualiapharma

    How can i make the logo to shrink in the main menu after scrolling?
    I have used custom CSS at the logo.

    Thank you!

    December 7, 2019 at 3:35 pm #1163595
    Victoria

    Hey Antonis,

    Do you have the shrinking header enabled?
    Image 2019-12-07 at 15.35.32.png

    Best regards,
    Victoria

    December 9, 2019 at 11:26 am #1163998
    qualiapharma

    Hello again,

    yes i did tried those, but due to my custom css it is not working.
    Please have a look. 

    .responsive .logo {
display: block
}

.logo, .logo a {
    overflow: visible;
}

.logo img {
padding-top: 20px !important;
padding-left:10% !important;
max-height: 200px !important;

}

@media only screen and (max-width: 767px){
.responsive .logo {
    height: 100px !important;
}
.responsive .logo a {
    display: block;
}
.responsive .logo img {
    max-height: 200px;
}
}

@media only screen and (max-width: 400px){
.responsive .logo img {
    max-height: 150px !important 
}
.responsive .logo a {
    display: block;
}
}

    My problem now is that when i scroll down the page the logo does not get into the header without oveflowing at the rest of the page, and it covers other elements.

    December 10, 2019 at 4:07 pm #1164472
    Yigit

    Hi,

    I added following code to Quick CSS in Enfold theme options > General Styling tab

    .header-scrolled .logo img, .logo img {
    -webkit-transition: all .5s ease-in-out !important;
    -moz-transition: all .5s ease-in-out !important;
    -o-transition: all .5s ease-in-out !important;
    -ms-transition: all .5s ease-in-out !important;
    transition: all .5s ease-in-out !important;
}
.header-scrolled .logo img {
    max-height: 100px !important;
}

    Please review your website :)

    Best regards,
    Yigit

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