Docs

[Brian S]

Hi guys, can you help me out? I am trying to figure out why my mobile menu is not appearing on iphone. My site is http://a34.251.myftpupload.com/. I’ll post a private comment below with the login info. Thank you so much in advance!!

[Brian S]

This reply has been marked as private.

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-btn-navbar,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover {
    color: #000;
}

Hope it helps 🙂

[Brian S]

Hi Thai, thanks for your fast response. That didn’t appear to help.

Here is all the CSS code I currently have in the custom field:

body, .x-breadcrumb-wrap {
background-color: transparent!important;
}
.x-navbar .desktop .x-nav {
float: left;
}
.x-navbar .desktop .x-nav > li > a {
font-family: ‘blair-mditc’ !important;
x-btn-navbar .x-icon-bars {
color: #000 !important;
}
.x-navbar { background-color: #0f1a7f; }

.x-breadcrumb-wrap { background-color: #0f1a7f opacity: 0.7; }

@media (max-width: 1140px) {.x-brand.img {width: 400px;}
}

@media (max-width: 640px) {.x-brand.img {width: 200px;}
}

body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
color: #292e77 !important;
background-color: #ffc231 !important;

@media (max-width: 640px) {.x-brand.img {width: 200px;}
}

body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
color: #ffffff !important;
background-color: #fffffff !important;
}
.x-searchform-overlay .form-search .search-query {
font-size: 12px;
}
.x-btn-navbar,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover {
color: #000;
}

Any further help you can give would be appreciated. Thank you so so so much!!!

[Joao]

Hi There you are missing a }

Please find this:

body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
color: #292e77 !important;
background-color: #ffc231 !important;

and add } after the last !important;

Hope that helps,

Joao

[Brian S]

Hi Joao, thanks for your help. I did add the requested character but it didn’t help the problem, which is the mobile menu isn’t showing up on iphone.

Here is my Custom CSS now:

body, .x-breadcrumb-wrap {
background-color: transparent!important;
}
.x-navbar .desktop .x-nav {
float: left;
}
.x-navbar .desktop .x-nav > li > a {
font-family: ‘blair-mditc’ !important;
x-btn-navbar .x-icon-bars {
color: #000 !important;
}
.x-navbar { background-color: #0f1a7f; }

.x-breadcrumb-wrap { background-color: #0f1a7f opacity: 0.7; }

@media (max-width: 1140px) {.x-brand.img {width: 400px;}
}

@media (max-width: 640px) {.x-brand.img {width: 200px;}
}

body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
color: #292e77 !important;
background-color: #ffc231 !important;}

@media (max-width: 640px) {.x-brand.img {width: 200px;}
}

body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
color: #ffffff !important;
background-color: #fffffff !important;
}
.x-searchform-overlay .form-search .search-query {
font-size: 12px;
}
.x-btn-navbar,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover {
color: #000;
}

Is there anything in my existing CSS that prevents the mobile menu from showing up on iphone? Thank you!!

[Rupok]

Hi there,

Thanks for writing back. Still you have few other glitches on your code (not closed properly, wrong pointer etc.). I have fixed and formatted the code. Let’s use the code below :

body,
.x-breadcrumb-wrap {
    background-color: transparent!important;
}
.x-navbar .desktop .x-nav {
    float: left;
}
.x-navbar .desktop .x-nav > li > a {
    font-family: ‘blair-mditc’ !important;
}
x-btn-navbar .x-icon-bars {
    color: #000 !important;
}
.x-navbar {
    background-color: #0f1a7f;
}
.x-breadcrumb-wrap {
    background-color: #0f1a7f;
    opacity: 0.7;
}
@media (max-width: 1140px) {
    .x-brand.img {
        width: 400px;
    }
}
@media (max-width: 640px) {
    .x-brand.img {
        width: 200px;
    }
}
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
    color: #292e77 !important;
    background-color: #ffc231 !important;
}
@media (max-width: 640px) {
    .x-brand.img {
        width: 200px;
    }
}
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu a:hover,
body .x-navbar .x-navbar-inner .x-nav-collapse .sub-menu .current-menu-item a {
    color: #ffffff !important;
    background-color: #fffffff !important;
}
.x-searchform-overlay .form-search .search-query {
    font-size: 12px;
}
.x-btn-navbar,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover,
.x-btn-navbar:hover {
    color: #000;
}

When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[Brian S]

Thank you for your help!

In swapping out the existing CSS with the one you posted above, I lost the item that made the font of my main menu blair-mditc font. Can you help me figure out where that went?

Thank you again for your help it is greatly appreciated!

[Brian S]

Nevermind, I figured it out. Thank you!

[Joao]

Glad to hear it Brian,

Reach us if you have any questions.

Joao

[Author]

Posts