Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 20, 2019 at 1:19 pm #1158456
    bauchope

    hello,
    I have removed the logo on the header using the following code
    .logo { display: none; }
    .responsive .logo { display: none !important; }

    However, I would like to have a logo in the header when you scroll down the page. I have already uploaded the logo but i have found it won’t work with the code in place!
    Is there a way to show just the transparency logo on the scroll down?

    Many thanks in advance
    Kim

    November 21, 2019 at 4:09 pm #1158844
    bauchope

    Hello,

    Any suggestions please for this issue? Need to show the client a 1st draft of the website tomorrow and would love to have this working by then

    Kim

    November 22, 2019 at 1:36 pm #1159132
    bauchope

    Hello,
    would appreciate a response if anyone can help please
    Many thanks
    Kim

    November 22, 2019 at 4:48 pm #1159213
    Victoria

    Hi bauchope,

    Best regards,
    Victoria

    November 22, 2019 at 5:18 pm #1159229
    bauchope

    not hidden – logins are working for me on a separate browser.
    Can you try again please?

    Have managed to change the function of the header now but I cannot get it to stick to the top – on scroll it turns to transparent even thought I have chosen no transparency.

    Thanks

    November 22, 2019 at 7:59 pm #1159311
    bauchope

    did you manage to get access to the site? this is quite urgent now and was hoping for a solution.

    Thanks in advance
    Kim

    November 23, 2019 at 10:06 am #1159389
    Guenni007

    the transparency logo is something different and would not work the way you like to have; because the transparency logo only is in place when the header is transparent. The transparency header is only there if the page isn’t scrolled – so viceversa you like to have.

    Frist Question : has your site a shrinking header? – because if so you can use the classes that toggles on header by scrolling.
    f.e. use the header-scrolled class for that

    #header:not(.header-scrolled) .logo {
  opacity: 0;
}

    if you use for that the opacity option you can have a smooth goaway of your logo by heaving transition timing
    may i see your site please

    November 23, 2019 at 10:31 am #1159391
    Guenni007

    by the way if – you haven’t a shrinking header we could have set it to shrink but without shrinking amount ;)
    that will be the next step

    November 24, 2019 at 5:54 am #1159552
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did you have any luck with the suggestion above @bauchope?

    Best regards,
    Rikard

    November 25, 2019 at 11:36 am #1159790
    bauchope

    No. Issue is the same. I have updated to the latest theme in case that was the issue but no change.

    I just need the header gold solid bar to stay where it is on scroll. Perhaps it is something in the css that is blocking the change?

    Could you suggest another option please?
    Kim

    November 26, 2019 at 12:16 am #1160088
    Guenni007

    have you a shrinking header? thats what i ask above.
    these two classes are only present if there is a shrinking header.
    ( you know – i do not see private content area as participant )

    November 27, 2019 at 2:19 pm #1160626
    Mike

    Hi,
    Sorry for the late reply, I see that you using the “sticky header” option, so in this case the header classes do not change on scroll.
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_scroll_script(){
  ?>
  <script>
 (function ($) { 
 $(window).load(function(){
 $('.logo').hide();
 $(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= 10) {
   $('.logo').show();
  } else {
   $('.logo').hide();
  }
 });
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_scroll_script');

    Best regards,
    Mike

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