[GermanParticipant]

Hi guys,

There’s a behaviour in the mobile version of my site’s menu, in which the menu burger opens it up but in order for you to see the options you have to scroll down.

Is it possible to achieve that when you click on the burger icon the page shifts automatically to the position where the mobile menu bar is located to the top of the viewport so that the whole menu can be seen expanded without the need of scrolling down? Makes sense?

I’ll ask some other questions but let’s keep it with this one first.

Looking forward to hearing your comments.

Best regards,
German

[GermanParticipant]

This reply has been marked as private.

[JadeModerator]

Hi German,

Thanks for writing in. You can add this under Custom > Javascript in the Customizer.

jQuery(function() {

    jQuery('header.masthead').attr('id', 'menu-area');

    jQuery('#menu-area').on('click touchstart', function () {
	href = '#menu-area';
    	jQuery('html,body').animate({scrollTop: jQuery(href).offset().top});
    });

});

Hope this helps.

[GermanParticipant]

Hi guys,

It did help. The issue now is that when you click on any of the options it won’t take you to the corresponding section, instead it’ll keep taking you to see all the menu options.

Ideas?

Thank you,
German

[Nabeel AModerator]

Hi again,

You can try replacing the previous code with this one:

jQuery(function() {

    jQuery('header.masthead').attr('id', 'menu-area');

    jQuery('.x-btn-navbar').on('click touchstart', function () {
	href = '#menu-area';
    	jQuery('html,body').animate({scrollTop: jQuery(href).offset().top});
    });

});

Let us know how this goes!

[GermanParticipant]

It worked, thank you.

Allow me to ask the next question:
The About and Products sections are using Revolution Slider Persephone arrows to navigate the slides but, after promoting the site to LIVE, they are no longer visible.

Do you know what the issue is?

Thank you again,
German

[RupokMember]

Hi German,

Thanks for updating. It seems the arrows are showing but the icons are not loading throughout your site – http://prntscr.com/8y0zxb

As you have lot of CSS on your Customizer it might create any conflict. Please take off all the code for a while to make sure they are not creating any conflict. You can also perform a plugin conflict if there is no conflict with Custom CSS.

Let us know how it goes.

Cheers!

[GermanParticipant]

No, that was not it. It was just a matter of updating the references to the final domain as I promoted this to LIVE. But, no problem.

The next question would be: if take a look at my footer (http://solsteace.com) you will notice there are three social networks we are targetting. In particular, the Facebook “Like” feature is being cropped somehow when you click on it (http://puu.sh/l9hpL/10d1a49b29.png). Is there something I need to do to make it display in full?

Thank you guys, your support is excellent.

Best regards,
German

[LelyModerator]

Hello German,

You can add the following CSS:

.fb_iframe_widget span {
    width: 100% !important;
}
.pluginConnectButtonLayoutRoot td._51m-.hCent {
    text-align: right;
}
.pluginConnectButtonLayoutRoot{
float:left;
}

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer because we don’t support third party plugins. 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. Thanks for understanding.

[Author]

Posts