Docs

[GeorgDick]

Hello,
I work on the domain http://phaenomen.net and use Theme X.
Is there a way to hide the superfly menue on mobile devices and show it for desktop and laptop users?
Wordpress version: WordPress 4.7.1
Theme X: Stack Integrity; Version: 4.6.4

Thank you very much.
Georg Dick

[GeorgDick]

This reply has been marked as private.

[GeorgDick]

Hello,
the alternative is to position the superfly menu horizontally on top but only for mobile devices? Is this possible? Do you have a solution for this?
Thank you.
Kind regards
Georg

[Lely]

Hello Georg,

That option is available in superfly settings. See attached screenshot. It was set correctly and the menu is already hidden when I check on mobile.

To show default X theme menu on mobile, please look for this custom CSS:

.x-navbar-wrap {
    display: none !important;
}

Replace that code with this:

.x-nav-wrap.desktop {
    display: none;
}

Hope this helps.

[GeorgDick]

Hello,
I managed to hide the superfly menu on the mobile devices. That seems to be the best.
I still have an additional question.
If you look to http://phaenomen.net/en/ you find in the menu the menu point Follow us on facebook. I would like to add the facebook icon before the text. How to do it? Can you help me?
Thank you vey much.
Georg Dick

[Joao]

Hi George, add the following code for the label :

<i class="x-icon x-icon-facebook" data-x-icon="" aria-hidden="true"></i> Follow Us On Facebook

Hope that helps,

Joao

[GeorgDick]

Hello Joao,
sorry it does not help. If you like you can have a look how I added the code in the menue. I wonder if aria-hidden is right. Might be area-hidden.But even then it does not work.
Thank you.
Georg

[Rue Nel]

Hello There,

Please copy the raw code here to preserve the unicode html entities or the data-x-icon value. The value is data-x-icon=”& #xf230;”. Please remove the space between & and # signs.

And if still doesn’t work out, please add this following custom css code in Appearance > Custom CSS

.sfm-sidebar-always #sfm-sidebar .sfm-menu-level-0>li.sfm-menu-item-1881 {
    position: relative;
    padding-left: 20px;
}

.sfm-sidebar-always #sfm-sidebar .sfm-menu-level-0>li.sfm-menu-item-1881:before{
    content: "\f230";
    display: block;
    position: absolute;
    top: 10px;
    left: 30px;

    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

http://prntscr.com/e0x87r

Hope this helps.

[GeorgDick]

This reply has been marked as private.

[GeorgDick]

This reply has been marked as private.

[Rad]

Hi there,

Please clear your site’s cache and browser cache. I can see it active, and updating the CSS will not automatically clear the cache.

Thanks!

[GeorgDick]

Hello Rad,
I cleared the site’s cache and browser cache. Can you pls. check. But no change.
Please advise me.
Thank you.

[GeorgDick]

Hello Rad,
now it works. I added the css Code again. It was missing.
Thank you.
Georg

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts