Transparent Navbar until scrolling,

Support
#1

I need assistance with the following, I have tried code from a few other discussions but haven’t quite got it right.

  1. I need help with the ids for the site links in the header (So when a client clicks a link it scrolls down to that section)

  2. I would like my fixed header to be transparent with white link text. Until a client starts scrolling then I would like it to change to solid white and the link text to change to black.

  3. I am struggling to change the links and text in the footer to black.

Please could you give me the code for all of that, and thank you again for the awesome service. :slight_smile:

#2

Hello There,

Thanks for writing in!

  1. You can refer our knowledge base article:

  1. To change background color on scroll please add following CSS in X > Launch > Options > CSS.

    .x-navbar.alt-color {
    background-color: #fff !important;
    }
    .x-navbar.x-navbar-fixed-top {
    background-color: transparent;
    }
    .x-navbar {
    transition: 0.2s all linear;
    }

Then add following JS code in X > Launch > Options > JS:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop(),
        navbar = $('.x-navbar');

    if (scrollPos > 200) {
      navbar.addClass('alt-color');
    } else {
      navbar.removeClass('alt-color');
    }
  });
});

  1. Please add following CSS under X > Launch > Options > CSS to change footer text color:

    .x-colophon.bottom .x-colophon-content p {
    color: #000;
    }

Let us know how it goes.

Thanks.

1 Like