Translucent Site Nav problematic upon scroll down

  • Resolved Alex T.

    (@polaatx)


    7 years, 11 months ago

    Hello,

    this is not a problem with the theme. Just a request for your opinion.

    I have set the #site-header to “transparent”. It let the header image bleed into the site-nav, which looks great – but only as long as the header image is showing. Upon scroll down (or any page that does not have a header image) the nav links and site disappear into the page’s white background because the text is white.

    I need to somehow change the background of the #site-header to white and text to black color upon scroll down, like on this site: https://www.secretcompass.com.

    Using javascript? Is there a plugin for this?

    Thank you for your attention in advance.

    • This topic was modified 7 years, 11 months ago by Alex T..
Viewing 6 replies - 1 through 6 (of 6 total)
  • Theme Author Webbjocke

    (@webbjocke)

    It looks quite nice actually so I’ll consider adding it! But let’s leave this thread open if someone comes up with a neat solution or tip for a plugin.

    Thread Starter Alex T.

    (@polaatx)

    I’ve been searching a lot and apparently there is no such plugin.

    https://www.secretcompass.com has a great solution.

    Thread Starter Alex T.

    (@polaatx)

    Hi Webbjocke,
    I hired someone to solve this issue through javascript and css.

    Here’s the javascript:

    (function($){
	$(document).ready(function(){
    	$(window).on('scroll', function(){
          var heighttop = $(window).scrollTop();
          if(heighttop > 1){
          	$("#site-header").addClass("scroll-bg");
            $('.scroll-bg li.current-menu-item a').attr('style', 'color:#FFF !important');
          }else{
            $("#site-header").removeClass("scroll-bg");
            $('.scroll-bg li.current-menu-item a').removeAttr('style');
          }
        });
    });
})(jQuery);

    And here’s the CSS:

    .scroll-bg{
	background:#FFF !important;
  	transition:.6s all;
 }
#site-header {
	transition: .8s all;
}
.site-nav a, .site-title, #site-slogan {
	text-transform: uppercase;
}
.scroll-bg .site-nav a, .scroll-bg .site-title, .scroll-bg .site-slogan, .scroll-bg #site-slogan {
  	color:#000 !important;
}
.scroll-bg .site-nav a:hover{
	color:#FFF !important;
}
.scroll-bg #mobile-menu-btn a {
	color: #000;
}
@media screen and (max-width: 991px) {
    .scroll-bg .menu li a{
	color:#FFF !important;
    }
}

    You can see how it works here: https://goo.gl/kO2cB5

    Any feedback you might have would love to hear it.

    • This reply was modified 7 years, 11 months ago by Alex T..
    • This reply was modified 7 years, 11 months ago by Alex T..
    Theme Author Webbjocke

    (@webbjocke)

    It looks nice I think! Should also be future safe and won’t break when new updates comes, if you add it via a child theme or plugin.

    Thread Starter Alex T.

    (@polaatx)

    It was added via plugin. So safe from theme updates. It’s working well so far.

    Please feel free to use it in future versions of Satisfy. Just my way of saying thank you for your help in this forum – although I realize it’s not a big deal deal writing this little bit of code. For someone like me who doesn’t know any javascript it made a lot of difference.

    Theme Author Webbjocke

    (@webbjocke)

    Great! Maybe I just might ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Translucent Site Nav problematic upon scroll down’ is closed to new replies.