Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1146258

    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:
    Almost there
    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

    • This topic was modified 5 years, 2 months ago by MinsterSC.
    #1146395

    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

    #1146432

    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

    #1147676

    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

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