Header menu - logo appearance and bar placement

Support
#1

Hello,
I’m using with ethos template settings. I’ve created fullscreen slider above header and I’m seeing header right at the bottom of first screen (right under slider, but visible all the time after page loading). So there are two things I would like to get:

  1. be able to put header away from full screen slider, so I would have to scroll down a bit just to see header,
  2. be able to show logo in header after scroll down to a certain anchor on a website.
    Second thing is that I also have a logo at the top of website right under header and I would like to have just one logo at a time, so when user scrolls down to a place below logo in content (it wouldn’t be visible anymore) small logo in header would appear.

Thank you for all help
Regards
Martin

#2

Hello There,

Thanks for writing in!

1.) Please edit your slider and find the offset container in the Slider Settings. Please remove any entry and left it blank or default.

2.) To hide the logo when you are not yet scrolling the page, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar .x-brand.img {
    opacity: 0;
    transition: opacity 1s ease;
}

.x-navbar.x-navbar-fixed-top .x-brand.img {
    opacity: 1;
}

We would loved to know if this has work for you. Thank you.

#3

Dear RueNel,
thank you so much! First problem solved in 100%, second one is a bit of a workaround but it will suffice. Unless you have an idea how to show logo when certain anchor will be “scrolled-out”?

Thank you

#4

Hi Martin,

You’re always welcome!
That might be possible with jquery scroll function

(function($){
$(window).scroll(function(){
   if ($(this).scrollTop() > 300) {//Feel free to adjust 300 to your preferred scroll value
   //Do something here to the logo when scroll is greater than 300
   } else {
  //do something else
   }
});
})(jQuery);

Hope this helps.