Hey Support Gurus,
Thanks for the help last time on an unrelated matter. This time I have a question relating to creating a transparent fixed logo on mobile devices. I believe I am close to a solution but its not quite there. I want the header to be transparent and fixed and load before the slider but currently it loads over the slider ( Nearly right but not).
I added this code to the Additional CSS:
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
position: fixed!important;
background: transparent;
}
}
This code results in this happening:
https://photos.app.goo.gl/DH5b9mKRBeQGhZb1A
Any help with getting it to load above the slider yet remain fixed on scroll and transition to none transparent as scrolling would be much appreciated.
Thanks in advance
Hey MinsterSC,
Your actual site looks different from the screenshot you posted, and it looks like the header is not loading over the slider. Did you manage to get this working?
Best regards,
Rikard
Hey Rikard,
Thanks for the reply. I took the code out last night, it was getting late etc and just took it out to return back to it today.The codes been added back if you want to take a look. Its close to what I hoped to achieve apart from how it loads over the slider.
Regards
MinsterSC
Hi,
Thank you for the update.
You may need to adjust the padding above the main container based on the height of the header.
.responsive #top #main {
padding-top: 126px !important; // value should be the same as the current header height
}
Please include it inside the css media query above.
Best regards,
Ismael