Superfly skewed menu social icons not showing on mobile and how to make smaller on mobile

[surfersteve1970]

Hi,

I’ve setup a Superfly skewed menu for my website vitaminclothing.com but I have a couple of issues:

1. On mobile phone the social icons are not showing (on other screens social icons are above the © info) and there is a scroll bar within the menu (see photo), tablet etc… are all OK.

2. I have tried adding css to Superfly Advance Menu, CSS section to make the menu less wide on the mobile phone only, but I haven’t been able to do that, could you let me know what CSS I need to put in please? Currently as in the photo the menu overfills the screen.

Thanks,

Steve

[tristup]

Hi Steve,
Thanks for reaching out.

The reason behind the issue you are facing related to the scrollbar and the social icons is the height of the wrapper of the Superfly menu. The icons are also visible if you reduce the height or remove the height 100%. I would like to suggest you go through the Official Documentation, specifically the section for Customize Appearance on Mobiles.

Manipulating the width and other attributes of Superfly using the CSS would require customization and which is beyond the scope of theme support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Thanks

[surfersteve1970]

Thanks for the reply.

I’ll check the documentation.

I’m a little surprised at your reply stating about the width and saying this is a customization as looking through the forums very question where people have asked for help with CSS within Superfly you have replied and helped them. Have the terms of your support process changed? I have bought multiple X licenses for different projects over the years and the main reason I have bought them is because of the help from X support, if this policy has changed for what is no doubt a very simple CSS change for you, but something I am struggling with then I will be forced to look at other themes going forward.

Also looking at the forum in the last day this was posted Superfly and Essential Grid Issue and Superfly menu CSS both which have replies from Support helping with CSS. Way is this? Does it depend on the issue? Does it depend on who win Support looks at the post? I’m confused and not happy…

[prakash_s]

Hi Steve,

Thanks for writing to us,

Please add this code in X->Theme options -> CSS to make Superfly menu smaller on mobile.

@media(max-width:360px){
.sfm-theme-top .sfm-sidebar-bg{
width: 430px;
}
}

And this one to make social icons visible and remove scrollbar on mobile

@media(max-width:767px){
#sfm-sidebar .sfm-nav{height:auto;}
}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks