Tagged: logo, navigation, overlap
-
AuthorPosts
-
April 26, 2022 at 10:03 pm #1349592
Hi, I would like to have my logo overlap the colored background of my navigation. So, looking for a way to make the colored background perhaps half the height it is now. You can see how it appears in the url provided and I’m trying to get it to look more like the attached screenshot. Thank you!
April 27, 2022 at 8:11 am #1349627Hey 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,
IsmaelApril 27, 2022 at 2:20 pm #1349667Thanks 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.
April 28, 2022 at 6:07 am #1349738Hi,
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,
IsmaelApril 28, 2022 at 4:46 pm #1349846We’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 #1349917Hi 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 -
AuthorPosts
- You must be logged in to reply to this topic.