Docs

[rdiverson]

hello,

I’ve searched the forums for the answer, but cannot find it. For some reason the mobile menu will not appear. Thanks.

lovecitychurch.ca

[Darshana]

Hi there,

Thanks for writing in! You could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Let us know how it goes.
Thanks!

[rdiverson]

Hello,

Thank you for your response. I’ve read all the other postings on this issue and have tried most of the basic suggestions like this. I have deactivated all the plugins with no success. Mobile menu still doesn’t show up. I am wondering if I inserted some Custom code that may have caused the issue. One of the main problems I’ve been having is the nav bar from large to smaller desktop isn’t responsive so I’ve tried to add custom code to fix it.

Here is what I have:

In Customizer:

/*
// Global headings.
*/

h4,
.h4 {
font-size: 150%
}

h5,
.h5 {
font-size: 125%
}

/*
// Buttons.
*/

.x-btn-alt-light {
color: #fff;
border-color: #fff;
}

.x-btn-alt-light:hover {
color: rgba(255, 255, 255, 0.75);
border-color: rgba(255, 255, 255, 0.75);
}

.x-btn-alt-dark {
color: #434f5b;
border-color: #434f5b;
}

.x-btn-alt-dark:hover {
color: rgba(67, 79, 91, 0.75);
border-color: rgba(67, 79, 91, 0.75);
}

/*
// Header.
*/

.x-topbar .p-info {
letter-spacing: 0;
}

/*
// Landmark header.
*/

.x-header-landmark {
padding: 45px 0;
border-color: #e4e1d0;
background-color: #e4e1d0;
}

.x-header-landmark h1.h-landmark {
font-size: 200%;
letter-spacing: 3px;
}

/*
// Content headings.
*/

.entry-title {
font-size: 125%;
}

.h-widget {
font-size: 112%;
}

/*
// Custom promo.
*/

.promo-custom {
margin: 0 auto;
max-width: 275px;
}

.promo-custom h4 {
margin: 0;
font-size: 1.15em;
}

.promo-custom p {
margin: 0.75em 0 1.15em;
font-size: 0.85em;
}

.promo-custom p:last-child {
margin-bottom: 0;
}

/*
// Footer.
*/

footer p,
footer h4 {
color: #9d9d9d;
}

footer a {
color: #fff;
}

footer a:hover {
color: #6190a2;
}

footer .footer-services {
font-size: 16px;
letter-spacing:0;
color: #fff;
}

footer .footer-credit {
font-family: \”Montserrat\”, sans-serif;
}

.masthead-inline .x-navbar .x-nav>li {
display: inline-block;
}

.x-btn.x-btn-flat, .x-btn.x-btn-flat:hover {
text-shadow: none;
}

.page-id-34 .x-colophon.bottom {
display: none;
}

.masthead-inline .x-navbar .desktop .sub-menu {
right: -10em;
padding-right: 0em;
padding-top: 0em;
}

.x-navbar .sub-menu a:hover{
background-color: rgb(67, 79, 91);
}

.x-navbar .sub-menu {
padding: 40px 0px 0px 0px!important;
}

.x-navbar .sub-menu li a {
padding: .5em!important;
}

.x-navbar .desktop .sub-menu li:before,
.x-navbar .desktop .sub-menu li:after {
background: transparent;
}

i.x-icon-spotify:before {
content: “\f1bc”;}

.x-navbar .desktop .x-nav > li > a {
padding: 16px 0px 0px 0px;
}

.x-brand img{
margin-left:-90px;
}

On the homepage:

/*
No need for style tags here;
simply get started by writing
CSS! Watch as your changes
are reflected live in the
preview area. Have fun!
*/

.x-columnize {
-webkit-column-rule: none;
-moz-column-rule: none;
column-rule: none;
}

@media (max-width: 480px) {
html body {
font-size: 20px;
}
}

Thank you!

lovecitychurch.ca is the website.

[Nico]

Hi There,

I could see the division of your mobile menu however I could be able to show it through inspect element. I could not see also any problem with you custom CSS. In this case, would you mind sharing your admin credentials so we we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[Author]

Posts