Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 9, 2023 at 3:23 pm #1397319
    billbasler

    Enfold Support, my apologies for starting this as a new support thread as I know this is among the most asked and documented challenges. I have been through many of the quick css suggestions—things that have worked for others, but I cannot seem to find the right combination here.

    You can find my site in the private content below. After many Quick CSS tests, I have stripped out all except for this as I was ending up with a mashup of code that could have been creating issues:
    /* CSS – logo size and position on large screens */
    @media only screen and (max-width: 2560px) {
    .responsive #top .logo svg {
    width: 350px;
    }
    }

    I am pleased with the logo size on desktop as it sits now. However, I need heading on the following:

  • The logo needs to reduce in size, with pleasing padding for the Shrinking Header. Current logo is not scaling down, and I would like more space above and below on shrink
  • Logo is also sized OK for Tablet view. Same shrink and padding issues as above (desktop)
  • On phone view, normal state of logo is too large and is overlapping menu. Ideally, the logo would be approximately 75% of screen width maximum. On scroll, the logo does shrink. I need to recheck my Quick CSS to see if there is a snippet that is causing this. Interesting, if the logo was this same width on load AND shrink it would be acceptable to me. The only thing that looks odd to be here is that when a user starts to scroll, the menu icon travels up at a different rate than the logo. Ideally the menu would remain on a vertically centered spacing with the logo, all through the scroll.

    Thank you so much!

February 11, 2023 at 6:21 pm #1397578
Mike

Hey William,
Thanks for your patience and the login, for desktop to make you svg logo smaller on scroll with more space above and below you can try this css:

#header.header-scrolled .avia-svg-logo a.av-contains-svg svg {
	 max-height: 50px !important;
	 transition: max-height .1s ease;
}
#header.header-scrolled .avia-svg-logo a.av-contains-svg {
	display: flex;
	align-items: center;
}

I’m not sure how small you want it on scroll so try adjusting to suit.
On tablet the header script doesn’t add the header-scrolled class for the Shrinking effect, this is by design, please see Enfold Theme Options ▸ Header ▸ Header behavior ▸ Shrinking Header
Enfold_Support_324.jpeg
I believe that you see the effect when you test because you are using the Dev Tools and are not refreshing the page when you are testing tablet and mobile.
The default mobile header is not a sticky header, please see our documentation to change this.
To reduce the logo width for mobile try this css:

@media only screen and (max-width: 430px) { 
.responsive #top .logo svg {
    width: 200px;
}
}

and adjust to suit.

Best regards,
Mike

February 11, 2023 at 11:11 pm #1397613
billbasler

Only a slight tweak to the size to accommodate the smallest of mobile sizes and this works beautifully, Mike. Thank you very much for your expert guidance. This thread can be closed.

February 11, 2023 at 11:28 pm #1397614
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

  • Author
    Posts
    • Viewing 4 posts - 1 through 4 (of 4 total)
    • The topic ‘Header logo size and padding for desktop and mobile sizes’ is closed to new replies.