Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1349592
    #1349627

    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

    #1349667

    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, 5 months ago by imagestudios.
    #1349738

    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

    #1349846

    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?

    #1349917

    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

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