Mobile not showing menu

Support
#1

Hi,

I just noticed on my mobile phone that my menu is not working. I just started to set up the website a few days ago. Do you know what I might be missing?

Thanks,
Mike

#3

Hi Mike,

Thanks for writing in! It seems the mobile button color is set to white, so that you don’t see it. Please head over to X -> Theme Options -> Ethos and set your mobile button color.

The site that I have checked is under the secure note below. If you’re having this issue on a different site, please provide us with your site URL.

Thanks!

#4

Hello,

Thank you for your fast reply.
For some reason when I go to the X - Theme Options - Ethos section, I am not able to see anything with a mobile button color option. Is there something else I might be missing?
That is the correct the website in the secure note section.

Thanks again,
Mike

#5

Hi Mike,

Sorry for the confusion, it’s only possible for renew stack. For ethos, you’ll have to change it through CSS, please add this CSS to Theme Options > CSS with your preferred color.

/* active color */
.x-btn-navbar {
    color: #fff;
}
/* idle color */
.x-btn-navbar.collapsed {
    color: rgba(255,255,255,0.35);
}
/* hover color */
.x-btn-navbar.collapsed:hover {
    color: #fff;
}

Hope this helps.

Thanks!

#6

Thanks for the reply. I tried the coding you gave and I think its kinda working now. But there is something else not working right with the menu on mobile. There’s a bar that goes at the top when you first click the menu and then if you click it again it goes away and then I can click the menu again and I see the menu load. Do you know what this is?

#7

Hi @speanut,

It’s because the color of navbar button is white. To fix this issue, please add this custom CSS:

a#x-btn-navbar {
    color: #000;
}

Hope it helps :slight_smile:

#8

I’m not much of a technical guy, but this is now what my CSS code has:

/* active color /
.x-btn-navbar {
color: #fff;
}
/ idle color /
.x-btn-navbar.collapsed {
color: rgba(255,255,255,0.35);
}
/ hover color */
.x-btn-navbar.collapsed:hover {
color: #fff;
}
a#x-btn-navbar {
color: #000;
}

Is this correct?
I’m still seeing the bar on my mobile :frowning:

#9

Hello Mike,

Please remove this code:

a#x-btn-navbar {
color: #000;
}

Use only this:

/* active color */
.x-btn-navbar {
    color: #000;
}
/* idle color */
.x-btn-navbar.collapsed {
    color: #000;
}
/* hover color */
.x-btn-navbar.collapsed:hover {
    color: #000;
}

Hope this helps.

#10

Thank you. I updated that CSS now.
I’m still able to get that bar to show at the top when I click the menu. Or maybe I am clicking just above the menu. Not really sure. Are you able to see that bar that I am talking about?

#11

Hey Mike,

I see what you mean. It’s the widget bar that is opening because it’s too close to your mobile menu button, to turn it off, please navigate to X > Theme Options > Header > Widget Bar > Header Widget Areas and select None (Disabled) (see screenshot)

Let us know how this goes!

#12

Thank you for the help. I made that update you suggested. So far i’m still seeing it on my mobile, but I’m hoping it’s because my cache or something. Are you able to see on your end if it’s fixed now?

#13

Hi Mike,

I checked your site and I still see the widget bar (see the red highlighted area in screenshot)

If you’ve turned it off then make sure to purge your plugin’s cache and then disable your caching plugin so you can see your changes on the front-end right away.

Cheers!

#14

Thank you. That seems to have done it.
You guys are awesome.

Take care
Mike

#15

We are delighted to assist you with this.

Cheers!

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.