Hi there,
Having a problem with the mobile menu on a site and not sure what’s going on. The site is at www.continuumteacherhistory.com.
It looks like the mobile menu either doesn’t work or pulls down a white screen instead of the menu at these break points:
It looks like it works fine below 979 px.
Not sure what the problem is, please advise!
Hi,
To fix it, you can add the code below in Theme Options > CSS
@media (max-width: 1275px) {
.x-navbar .x-nav-wrap.mobile {
display: block;
}
.x-navbar .x-nav-wrap mobile.x-collapsed {
display: none !important;
}
}
Hope this helps
Unfortunately this caused the mobile menu to remain continually open when dropping below 1275px screen size, guess it’s better than not at all but not totally ideal 
Screenshot included:
Hello @BodhiJames,
You are using this code:
@media (max-width:1275px){
.x-navbar,.x-navbar-wrap,.x-navbar-fixed-top-active .x-navbar-wrap{
height:auto;
}
.x-btn-navbar{
display:block !important;
float:right;
}
.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapsing{
display:block;
}
.x-nav-wrap.desktop .x-nav{
display:none;
}
}
Please have it updated and use this instead:
@media (max-width:1275px){
.x-navbar,.x-navbar-wrap,.x-navbar-fixed-top-active .x-navbar-wrap{
height:auto;
}
.x-btn-navbar{
display:block !important;
float:right;
}
.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapsing,
.x-nav-wrap.mobile.x-collapsed{
display:block;
}
.x-nav-wrap.desktop .x-nav,
.x-nav-wrap.mobile{
display:none;
}
}
We would loved to know if this has work for you. Thank you.
Hmm, unfortunately this seemed to do exactly the same thing, where the mobile menu appears but it is open and doesn’t necessarily respond to the button.
Hi,
Please change this code
@media (max-width:1275px) {
.x-navbar,
.x-navbar-wrap,
.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}
.x-btn-navbar {
display: block !important;
float: right;
}
.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapsing {
display: block;
}
.x-nav-wrap.desktop .x-nav {
display: none;
}
}
with this
@media (max-width:1275px) {
.x-btn-navbar {
display: block !important;
float: right;
}
.x-nav-wrap.desktop{
display: none;
}
.x-nav-wrap mobile {
display:block !important;
}
.x-nav-wrap mobile.x-collapsed {
display:none !important;
}
}
If it still doesn’t work, please provide us your wordpress admin login in Secure Note
Thanks
Hmm unfortunately still not working
Hi Bodhu,
First of all, we do apologize that we did not give you a context regarding the support for this kind of customization. Let me give you detailed information:
The problem that you are experiencing is because you try to achieve a feature that theme does not support. Our theme does not have a feature to extend the mobile menu to bigger screen sizes. You need to remove the customization. I removed the Custom CSS from X > Theme Options > CSS and the original view showed:
The problem that I see in that case is that you set the link color to white and it does not show the menu items there. You need to go to X > Theme Options > Header > Navbar Link and change the color from white to something that shows the links correctly:
Now it seems that the whole reason you want to extend the mobile menu to the larger screen sizes is that the menu goes to two lines. You can fix that by changing the font size of the menu items by adding the CS code below to X > Theme Options > CSS:
body.x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a>span {
font-size: 14px;
padding-left: 10px;
padding-right: 10px;
}
body.x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a {
padding-left: 5px;
padding-right: 5px;
}
@media (max-width: 1256px) {
body.x-navbar-fixed-top-active .x-navbar .desktop .x-nav>li>a>span {
font-size: 13px;
}
}
Please kindly do not try to expand the mobile menu to larger screens as it is not only a matter of CSS and the Javascript complicated stuff is also involved which you will not be able to customize easily and such customization is outside of our support scope.
Thank you for your understanding.
Okay so this helped somewhat. The problem that wasn’t identified by anyone previously is that the header widget button is still showing and it is hovering right over the mobile menu icon, so it randomly gets clicked by visitors and opens up a blank menu with a white background.
The widget menu was enabled in settings but I went ahead and disabled that, (by going to X > Theme Options > Header > Widgetbar and selecting “None”) so now it looks like good to go.
Hi again,
Ah nice catch, so the header widget button was overlapping with the mobile menu, the header widget button has the higher z-index than mobile menu icon that’s why you were having this issue. We’re glad you managed to resolve the issue.
Cheers!
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.