[rrrsardaParticipant]

Hi ! Is it possible to set some specific time after which the nav bar appears for the website ? Like when i open the website, there is no nav-bar, but after some set time, it appears and then stays.
Thank you.

[ThaiModerator]

Hi There,

Thanks for writing in!

#1] Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-navbar {
	display: none;
}

#2] Try adding following Javascript under Appearance > Customize > Custom > Javascript:

jQuery(document).ready(function($){
	setTimeout(function(){
		$('.x-navbar').fadeIn('slow');
	}, 500);
});

You can change the 500 number, 500 mean 0.5 second.

Hope it helps.

[rrrsardaParticipant]

Hey ! That was indeed helpful !
I have set the time for rev slider after which it disappears. But due to the height calculations, the one-page nav and the auto-highlight feature in the menu get disrupted. What could be the work around ?

This is the final piece for my website.
Your help will be much appreciated.
Thank you so much !

[rrrsardaParticipant]

Or can auto scroll to the content page be done after setting some specific time to the website content ? without removing the slider ?

[ZeshanMember]

Hi there,

We can help you with the second workaround. So, add following JS code under Custom > JavaScript in the Customizer:

jQuery(document).ready(function($) {
  if ( $('.x-slider-container').length ) {
    var adminbarHeight       = $('#wpadminbar').outerHeight();
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
    
    setTimeout(function() {
      $('html, body').animate({
        scrollTop: $('.x-main').offset().top - adminbarHeight - navbarFixedTopHeight + 1
      }, 700);
    }, 8000); 
  }
});

Increase/decrease 8000 ( = 8 seconds ) from the code to adjust the delay.

Hope this helps. 🙂

Thank you.

[rrrsardaParticipant]

Hi ! Thank you so much. Works perfectly. Just the way I want. Just another thing though, as the scroll up arrow apeears after I scroll down some part of the page, can we get it to scroll up to a particular section of the page ? (section below the slider that is, the main content area).

Thank you again. 🙂

[Rue NelModerator]

Hello There,

You’re welcome!
Thanks for letting us know that it has worked for you.

For the scroll up icon, please add this js code in your customizer, Appearance > Customize > Custom > Javascript

(function($){
  var scrollTopAnchor = $('.x-scroll-top');
  var maintop = $('.x-main').scrollTop();
  scrollTopAnchor.click(function(){
    $('html,body').animate({ scrollTop: maintop }, 850, 'easeInOutExpo');
    return false;
  });
})(jQuery);

Hope this helps. Kindly let us know.

[rrrsardaParticipant]

Hello ! Thanks for the reply, but this code doesn’t seem to work. The scroll up icon still scrolls back up to the slider, when I want it to only scroll till the portion from where the nav-bar starts.
Thank you.

[Rue NelModerator]

Hello There,

Would you mind providing us the url of your site with login credentials, if necessary, so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password (only if necessary)

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[rrrsardaParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

Please try this JS code instead:

jQuery(document).ready(function($) {
  var scrollTopAnchor      = $('.x-scroll-top');
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();

  scrollTopAnchor.off('click');
  scrollTopAnchor.click(function(e){
    e.preventDefault();
    $('html,body').animate({ 
      scrollTop: $('.x-main').offset().top - adminbarHeight - navbarFixedTopHeight + 1 
    }, 850, 'easeInOutExpo');
  });
});

As this is a custom development, further customizations from here is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. https://community.theme.co//custom-development/

Thanks for understanding. Take care!

[rrrsardaParticipant]

Actually it worked perfectly.
Thank you ! Now my website is complete thanks to your awesome theme and even better support !

[RupokMember]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[rrrsardaParticipant]

Only a very minor one..the above javascript for the scroll arrow works perfectly in desktops, but not in phones. What shall I do for that ?

[FriechModerator]

Hi There,

Sorry we couldn’t replicate the issue on mobile. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do, perhaps some screenshots.

Cheers!

[Author]

Posts