Docs

[bryan1976]

Hi Guys,

My desktop site is finished and looking great. For navigation I use Ubermenu on desktop, Superfly on mobile.

There is something strange happening on the mobile version which I have tried to fix, but I do not want to mess up the desktop site!

The website is http://www.headphonic.co.uk

The masthead on desktop has some custom CSS you provided to make it work, and it looks great – but can you help remove this for the mobile site?

Many thanks,

Bryan

[Rue Nel]

Hello Bryan,

Thanks for writing in! Upon checking your site in mobile, this is what I am seeing:

It looks like the SuperFly menu is deactivated.

Please let us know how it goes.

[bryan1976]

This reply has been marked as private.

[Christopher]

Hi there,

Please find this code :

.masthead, .x-navbar-inner {
    min-height: 91px;
}

And update it to :

@media (min-width:979px){
.masthead, .x-navbar-inner {
    min-height: 91px;
}
}

Add following code too :

@media (max-width:979px){
.x-navbar {
    background-color: transparent !important;
}
.x-brand {
    display: none;
}
.woocommerce div#rev_slider_21_1_forcefullwidth {
    display: none;
}
}

Hope it helps.

[bryan1976]

Hi,

The first snippet worked well thanks:

@media (min-width:979px){
.masthead, .x-navbar-inner {
min-height: 91px;
}
}

The second didn’t make any difference – however things are looking OK for now.

There are 3 main issues remaining:

1) I have to enable ‘show on desktop’ for the superfly menu to show on mobile. If I leave it as show on mobile only, it doesn’t show. Needs to show on mobile only.

2) On the homepage, the toggle/hamburger isn’t at the top like every other page. Can it be forced to the top to match other pages?

3) Please can you suggest how I force the hamburger colour to #ffffff – it is set as this in the plugin, but still shows as black!

Please see attached.

Many thanks,

Bryan

[Christopher]

Hi there,

Please add this CSS:

@media (min-width:979px){
.sfm-navicon-button.x.sf_label_default {
    display: none;
}
}
.sfm-navicon, .sfm-navicon:after, .sfm-navicon:before, .sfm-label-metro .sfm-navicon-button, #sfm-mob-navbar {
    background-color: #fff !important;
}

#2 I can’t replicate this, please clear cache and check again.

Hope it helps.

[bryan1976]

Hi,

Thats great thanks!!

But the toggle/hamburger still wont show on mobile, unless I have the desktop superfly menu enabled???

Please see attached, my settings in Superfly. Then you can see that the hamburger doesn’t show on mobile?

Many thanks,

Bryan

[Christopher]

Hi there,

Because you’ve hidden it with following code :

@media only screen and (max-width: 959px) {
.ubermenu, .ubermenu-responsive-toggle {
    display: none;
}
}

Please remove the code and enable superfly. I provided you with the code to hide it on desktop.

Hope it helps.

[bryan1976]

Hi,

Sorry this doesn’t make any sense.

I use Ubermenu on desktop, and want superfly on mobile.

I know how to remove superfly from desktop.

I have removed ubermenu from mobile with the following code:

@media only screen and (max-width: 959px) {
.ubermenu, .ubermenu-responsive-toggle {
display: none;
}
}

If I delete this code, I get ubermenu on mobile. It doesn;t suddenly allow superfly to appear though???

Sorry if I am missing something obvious.

Kind regards,

Bryan

[Joao]

Hi There,

You cannot have ubermenu + superfly running on your website.

You need to choose one of those just.

You can use : ubermenu + x menu

or

You can user: x menu + superfly.

Let us know if you need further assistance.

Joao

[bryan1976]

Hi Joao,

Thanks for the clarification!

OK well I have removed Ubermenu from my site, but if I am to use x menu for desktop, please can you help with 2 things:

1) In the header menu, I need ‘CART’ replaced with an icon. I have tried inserting data-x-icon=”& # xf07a ;” in the navigation label but it doesn’t work.

2) Likewise I need ‘SEARCH’ replaced with a ‘search’ icon, but enable a search using this shortcode [aws_search_form] which enables the woo search plugin.

Ubermenu did both of these, so if I can get this working with x menu, that will be a good start!

Many thanks for your help!

Bryan

[Christopher]

Hi there,

#1 Please add <i class="x-icon-cart" data-x-icon=""></i> in navigation label.
#2 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.

Hope it helps.

[bryan1976]

Hi team,

OK I am asking WPKraken to provide a solution for the shortcode and icons replacing text in x menu on desktop.

I have successfully hidden x menu on mobile.

Superfly is now hidden on desktop but showing on mobile!

So finally, please can you help me remove the white border at the top of my mobile site pages….see attached.

And also hide yoast breadcrumbs from mobile site only.

Please visit http://www.theaudiobarndev.co.uk (my dev site for this now).

Thanks for your help.

Bryan

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

@media(max-width: 480px) {
.x-slider-container.below {
   
    margin-top: -92px;
}
.sfm-label-none .sfm-navicon, .sfm-label-none .sfm-navicon:after, .sfm-label-none .sfm-navicon:before, .sfm-label-text .sfm-navicon, .sfm-navicon {

    background: white;
}}

Hope it helps

Joao

[bryan1976]

This reply has been marked as private.

[Author]

Posts