[special-agentParticipant]

Hello
I am hoping to build a website that is a single page scroll with a mixture of full screen images and full screen sliders. To then look visually similar to ethos 2 (full screen scroll with links in the top menu that relate to further down the page etc) without the parallax scrolling. My main question is how can I insert a slider as if it were just another image in the one page scroll? And I know a vague question but do you have any advice how you would go about tackling the task as a whole?

The temporary url I am using is http://specialagent.apps-1and1.net/ if that is helpful

Many thanks,
Simon

[DarshanaModerator]

Hi there,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[special-agentParticipant]

Hello, Sorry for the lack of clarification.
I have been working on it and getting closer to what I want. I will try and ask some clear questions.

Question 1:
How can I create an item in the navbar that links to a full screen slider on my single page scroll? The same principle as used on http://theme.co/x/ where it scrolls up and down the page depending on the tab you click. I would like to do this without having to create breaks between sliders

Question 2:
I am going to add text / logo’s etc over the top of my sliders like on website http://www.spwilsher.com/ is it possible to get these to appear when you scroll down over the slider when going down the page? Giving the visual look of the text in http://theme.co/x/demo/ethos/2/?

Question 2.1:
Alternatively, instead of adding layers and effects within the sliders (question 2) would it be easier / is there another way of overlaying text and images that can then have some subtle motion effects?

url http://specialagent.apps-1and1.net/

Thankyou for your response

[LelyModerator]

Hello There,

Thanks for posting in and giving us your site URL.
1. Upon checking your third menu MENU ITEM is now linking and scrolling to the slider. Is this ok now?
2. and 2.1 Please check the thread on this post:https://community.theme.co//forums/topic/button-or-text-layer-in-slider-revolution-fade-up-and-stay-on/.

Hope this helps.

[special-agentParticipant]

Thanks, yes I got it to work and I should have said.
1. I am however having a problem that when I click on “single” in the navbar for example, it scrolls down but the navbar is not going over the slider which then pushes the bottom of the full screen slider off the screen, compared to if you click on “home” which is how I would like it, can this be rectified so that the slider is full screen underneath the navbar after clicking an item on the navbar?

2. I will run through the thread and see how it goes, thankyou

3. Sorry to add questions but is there a way of changing the spacing for the items in the navbar, I would like add more width to the box either side of the text so the items are more spaced out

Thankyou for your help and time so far

[ZeshanMember]

Hi there,

#1: You can try adding following JS code under Custom > JavaScript in the Customizer:

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

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight + 1
    }, ms, easing);
  }

  $('.x-navbar .desktop a[href*="#"]').off('touchstart click');
  $('.x-navbar .desktop a[href*="#"]').on('touchstart click', function(e) {
    $href            = $(this).attr('href');
    notComments      = $href.indexOf('#comments') === -1;
    notAccordion     = $href.indexOf('#collapse-') === -1;
    notTabbedContent = $href.indexOf('#tab-') === -1;
    if ( $href !== '#' && notComments && notAccordion && notTabbedContent ) {
      var theId = $href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });
});

#3: Yes, you can use following CSS code under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav > li > a {
  padding-left: 25px;
  padding-right: 25px;
}

Replace 25px (both instances) to your desired left and right spacing of the menu item.

Hope this helps. 🙂

Thank you.

[special-agentParticipant]

Both bits of code worked perfectly, thanks so much for your help.
Have a nice day

[ZeshanMember]

You’re welcome! 🙂

[special-agentParticipant]

Hello again,
I now have two pages and two menu’s on my site. I am finding that when navigating back to parts of my single scroll home page from my second page (recruitment) I am having a problem with the navbar not going over the slider which then pushes the bottom of the full screen slider off the screen, similar to the problem I had earlier in the thread that you sorted out for me. Can this be fixed so that when navigating from “Recruitment” to “Case Studies” for example it works the same as navigating within the single scroll home page where it takes into account the navbar?

Any help much appreciated

[NicoModerator]

Hi There,

Thanks for writing in again.

We’ll be happy to assist you with this issue, but we’ll first need you to provide us with some information below to check your setup closer (don’t forget to select “Set as private reply” to ensure that your data remains hidden):

Your URL.
Your WordPress login credentials.
Your FTP credentials (in case we need to check anything out on your server).
Once we have all of this, we’ll be happy to take a deeper look into things.

Thanks.

[special-agentParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Add this code at your custom javascript too.

	jQuery ( function($) {
	
	if( $('body').hasClass('home') ) {

			setTimeout( function(){
			$(document).ready(function(){ 
				
				var hash = window.location.hash == '' ? 'body' : '#'+window.location.href.split("#").slice(-1)[0];

				if(hash) {
					 	$('html,body').stop().animate({ scrollTop: $( hash ).offset().top - ( $('.x-navbar').height() + $('#wpadminbar').height() ) },700 ,'swing');
				}

			}); }, 300);

	}

	} );

This is just code to support your previous code, any conflict or issues this would cause is something we can’t support. One page is not setup for this.

This is done many times in the forum, https://theme.co/x/member/forums/topic/mobile-menu-navigation/?replyto=237158#post-237301 , some with different implementation. But your existing custom code can’t co-exists with this. And that’s the problem with too many customization. Still possible, but it should be done by developer.

Thanks!

[special-agentParticipant]

Hello,
Yes you are correct that there are some conflicts that create slightly odd results. But baring in mind that I have asked alot and pushing the boundaries of the theme without a developer it was to be expected.
Thank you for your help anyway

[RupokMember]

Hello There,

Thanks for understanding. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts