Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 26, 2022 at 10:03 pm #1349592
    April 27, 2022 at 8:11 am #1349627
    Ismael

    Hey imagestudios,

    Thank you for the inquiry.

    You can use this css code to adjust the position of the logo and have it extend outside the header container.

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

  div .logo {
    position: absolute;
    top: 80px;
  }
}

    You may also have to adjust the Enfold > Header > Header Layout > Header Size settings to Slim.

    Best regards,
    Ismael

    April 27, 2022 at 2:20 pm #1349667
    imagestudios

    Thanks Ismael, this was a great solution. If I set the header to slim, it reduces the size of the logo as well. Any way to make the header less tall (“slim”) and keep the logo size?

    Then, when it shrinks upon scrolling down, is there a way to have the logo be in the color portion of the header rather than hanging down below it?

    • This reply was modified 2 years, 3 months ago by imagestudios.
    April 28, 2022 at 6:07 am #1349738
    Ismael

    Hi,

    Thank you for the update.

    You can adjust the size of the logo with this css code.

    .responsive .logo img {
    margin: 0;
    min-height: 200px;
}

    Make sure to place it within the css media query that we created above. You can also adjust its vertical position by adjusting the value of the top property in the css rule that we suggested above. 

    div .logo {
    position: absolute;
    top: 80px;
 }

    Best regards,
    Ismael

    April 28, 2022 at 4:46 pm #1349846
    imagestudios

    We’re getting close Ismael. Please look at how it appears now with slim header setting. But, 1) it cuts off the bottom half of the logo and 2) when I scroll up, the logo needs to shrink into the header instead of overhang it. Is that doable?

    April 29, 2022 at 9:16 am #1349917
    Nikko

    Hi imagestudios,

    For #1 and #2, please add this CSS code in Quick CSS:

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

#top .logo img {
    transition: all 0.7s;
}

#top .header-scrolled .logo img {
    min-height: 100px;
}

    Best regards,
    Nikko

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