-
Posts
-
Hi Enfold Team
I have a super complicated design idea and I am sure you can help me.
On the homepage I would like to use a “stacked version of the logo” quite large and overflowing the transparent menu. I put this logo in the Transparency Logo field. And it seems to work great with the shrinking amount in the header behavior of 75%
And then when scrolled it switches perfectly to the main logo: “long version of the logo” and when scrolled more that they shrink and stick.
(at first I struggled with the overflow because it also applies also to the long version but I added css: .header-scrolled {min-height: 50px !important;} however its not quite right because the logo hangs a bit low. maybe you can help me move the scrolled more long logo up a bit (about 4 pixel)For all the other pages I would like the “the long version of the logo” just shrink a bit. right now it shrinks also 75% like the homepage logo and gets really tiny
Here is my code and I will put the website in the private content because its on staging and not live yet.
.logo, .logo a {
overflow: visible;
position: relative;
display: block;
height: 100%;
padding: 4px;
}.page-id-330 .logo svg {
overflow: visible;
min-height: 200%;
}
.page-id-330 .av_header_transparency {
overflow: visible;
min-height: 90% !important;
}.page-id-330 .logo avia-svg-logo {
height: 30px !important;
}.header-scrolled {
min-height: 50px !important;
}.logo avia-svg-logo {
min-height: 50px !important;
}.container av-logo-container {
min-height: 50px !important;
}.header-main {
padding-top: 5px !important;
}Thanks so much as always for helping me. I feel so lucky that you help designers like me with crazy ideas.
TinaIs there a page we can see?
It would be easier to advise you if we could see the page.__________________
the overflows are important to set – as you do it.
but on the image ( svg ) you had to calculate the max-height and height – and it is important to set the height in relative values.
so have a look what is the starting height of your header: f.e. 100px
but you like to have the logo at 150px. ( this should be the max-height) – 150px are 150% of the start height – that will be your height definition:
If you set it as relative value it will follow the shrinking of your header..logo img { height: 150%; max-height: 150px !important; }Thanks so much Günni, I will email you the credentials and you are welcome to change anything in the settings, its just a staging environment so you cant break anything that is live.
It is kind of what I am thinking just that the transparent logo is different on the homepage.
Hi,
Glad to hear Guenni007 is going to help you, Guenni007 has more experience with SVG than I do, for your other pages where the logo is very small after scrolling perhps this css will help:#top:not(.home) #header.header-scrolled .logo a svg, #top:not(.home) #header.header-scrolled .logo a, #top:not(.home) #header.header-scrolled .logo { padding: 0; max-height: 50px !important; height: 50px; }After applying the css, please clear your browser cache and check.
Best regards,
MikeThank you so much for helping Mike and Guenni. Guenni is a CSS / SVG magician! He made the text of the logo fly from under the logo image to the side. It looks so cool. Here is the website link I will put the changes on: https://mgsportsplex.com. It’ll probably be live in a couple of days – so hang tight before clicking the link. I just wanted you to be able to close the support for this if you like.
TinaHi,
Glad Guenni007 could help, thank you Guenni007, we will close as you said, 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
- The topic ‘css help for transparency overflowing logo to scrolling header logo w min size’ is closed to new replies.