Docs

[Mark B]

Hello I’m playing with superfly for a mobile menu. It’s actually looks very robust. The only issue I’m having is that on my main page I have two sliders setup before my first content area. I would like the toggle to start after the two slider areas. If you could provide some markup that would be great.

http://www.theinspectionconsultant.com

Thanks

Mark

[Joao]

Hi mark,

Please add the following code to Appereance > Customizer > Custom > CSS

.sfm-navicon-button.sf_label_default {
    margin-top: 100px;
    margin-left: 30px;
}

Hope it helps

Joao

[Mark B]

hmmm thats not what i need. I need the toggle to start on the “welcome to kindom church” block.

[Nabeel A]

Hi there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Mark B]

Ok I’ve tried so many things with no success…
I have a video slider first thing on my home page. I would like to have the toggle below the slider.
Im not a coder but can’t even find someone to complete this task. I do seem basic and not a robust project?
I tried to use a custom toggle element and some code:

add_action(‘wp_head’,’nyasro_head’); function nyasro_head(){ ?> <style type=”text/css”> header{ position: relative; } #ny-menu-toggle{ position: absolute; bottom: -60px; right: 20px; z-index: 11111; } }

height: 40px; width: 40px; display: none; background-color: rgb(170, 170, 170); text-indent: -9999px; /**/ }

position: fixed; right: 20px; top: 20px; z-index: 11111; height: 30px; }

@media screen and (max-width: 749px){
#ny-menu-toggle a{
display: block;
}
}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function($){
var m = $(‘#ny-menu-toggle’),t=m.offset().top;
$(window).scroll(function(){
if ( $(window).scrollTop() >= t – 20 ) m.addClass(‘ny-fixed’);
else m.removeClass(‘ny-fixed’);
})
})
</script>
<?php

The only problem is that is seems messy. and doesn’t work fully.

Anything you can provide would help extremely..

Mark

http://www.theinspectionconsultant.com

[Rad]

Hi there,

It seems okay on my end, maybe it just needs icon within it? And try replacing this line

var m = $('#ny-menu-toggle'), t=m.offset().top;

with this line

var m = $('#ny-menu-toggle'), t=$('.x-main').offset().top;

and change this

if ( $(window).scrollTop() >= t – 20 )

to this

if ( $(window).scrollTop() >= t )

Do not rely on the position of #ny-menu-toggle because it varies. Rely on the position where the slider ends and content start. And it’s the .x-main.

Cheers!

[Mark B]

Thank you so much for your notes. Unfortunately even after the change in markup I’m still having trouble in mobile view. The toggle does not want to stay below both masthead sliders.. ?

Regards,

Mark

[Rad]

Hi there,

Hmm, should it say under or should scroll? What I see is, it’s under the slider and it switches to fixed positioning when it reaches the content while scrolling. May I see a video of what you’re currently getting? And please provide a mockup of how it should be position, should it be static?

Thanks!

[Mark B]

[video src="https://dl.dropboxusercontent.com/u/33243363/toggle2screen.mp4" /]

in this screen capture of my iPhone the video displays how the code is buggy on mobile.
In the first 30secs of the video i reload the page and it acts as i would like. The first two full page sections are two separate sliders. I would like the toggle start below the second slider. After the 30sec video mark you can see how the toggle now is not anchored to the bottom of the 2nd slider.

hope this video clears it up.

Thanks

[Rad]

Hi there,

Hmm a bit confusing. The second slider is the pink one, right?

I would like the toggle start below the second slider

The toggle starts right under the pink slider, which is the second one. It switched to fixed positioning when the scrolling reached the bottom of the pink slider.

If you’re referring about the positioning after the reload, it’s because the sliders are still loading which means there is no dimension yet. The height is equal to zero on initial load and while that happens, the custom javascript is already running. The toggle will start at the bottom of the second slider regardless of height (height depends on load speed).

How about moving that custom javascript to your slider’s custom javascript. This ensures that the javascript will run along with the slider. The current problem is that javascript execution is in sync on rev. slider’s loading. The slider should be loaded first before it runs the script.

Thanks!

[Mark B]

That sounds like a logical fix. And yes on the second reload it’s not properly fixed to the bottom of the second slider. Sorry I’m not exactly sure where to put the script?

I can provide login credentials if needed. Or I’m actually using your managed hosting ?

Thanks

Mark

[Mark B]

FYI it seems that it is only breaking on iPhone safari and firefox for iPhone?
I haven’t tried any adroid phones yet?

Mark

[Rad]

Hi there,

It maybe loading differently than other devices. Each one has their own rendering engine. Hmm, the problem is there are two sliders and it loads independently from each other. Hence, the load time may vary as well, which means, it may change height while loading. Let’s try this, replace your javascript with this.

var first_slider_is_loaded = false;
var second_slider_is_loaded = false;

revapi9.bind("revolution.slide.onloaded",function (e) {

first_slider_is_loaded = true;

});

revapi10.bind("revolution.slide.onloaded",function (e) {

second_slider_is_loaded = true;

});

jQuery(document).ready(function($){

var m = $('#ny-menu-toggle'), t=$('.x-main').offset().top;

$(window).scroll(function(){
if ( $(window).scrollTop() >= t && first_slider_is_loaded && second_slider_is_loaded ) m.addClass('ny-fixed');
else m.removeClass('ny-fixed');
});

});

Hope this helps.

[Mark B]

This reply has been marked as private.

[Mark B]

This reply has been marked as private.

[Author]

Posts