Menu navbar collapse mobile not working

Support
#1

Dear Apex,
I have the same problem as listed in this forum- since I updated cornerstone, the collapsed menu in a mobile is not displaying anything when you click the hamburger.

x-btn-navbar collapsed should link to https://www.site.com/# and is displaying nothing.

Cornerstone Version 3.1.3 | WordPress 4.9.6 running X – Child Theme theme.

This code from the post above is not solving anything.

Secondly- where on earth is the global css options? I am finding it impossible to navigate the new menus for cornerstone.

Kind regards,
Alexandra

#2

Hi there,

Would you mind providing admin credentials to your site? We could take a closer look at what’s going on with the menu. You can safely add this in a secure note.

The global CSS is the “CSS” icon in the bar when you’re in Theme Options.

#4

Dear Alexander,
How do I mark a post as private?
I’ve just searched your forum and there is no help on this.
Kind regards,
Alexandra

#6

Hi There,

I could see that you’ve updated the Cornerstone plugin to the latest version but didn’t update the X theme yet. Could you please update your X theme to the latest version as well(v6.1.3)?

https://theme.co/changelog/

Thank you.

#7

Dear Thai,
I did as you advised and updated X and it has COMPLETELY messed up the site and so I have had to take it down and put it in maintenance mode.

Please can you urgently take a look,
kind regards,
Alexandra

#8

I am really grateful to you for answering this urgently.

#9

Hello There,

I could not log in using the given credentials.

It seems that your given url is redirected to another url.
Please see the secure note.

#10

Many thanks for your help,
Regards,
Alexandra

#11

Dear Thai,
The credentials are as above- please navigate straight to /wp-admin/ I am sorry about the redirect but the X update recommended above has meant I have had to take the site down.

Many thanks for urgently taking a look at this,
Kind regards,
Alexandra

#12

Hey Alexandra,

Your site can’t be reached. Please check.

Thanks.

#13

Dear Christian,
Sorry I typed the wrong URL. Please navigate directly to …/wp-admin/

After installing the update you recommended the site is down and a redirect is in place for the homepage.

Kind regards,
Alexandra

#14

Hi There,

I’ve just checked your website and the mobile menu is working fine:


Could you please all the cache and check again?

Thank you.

#15

Dear Thai,
Thank you for taking a look - the navbar is no longer the problem. Since the X update the layout on the half the pages is completely messed up - with the footer taking up half the page horizontally- did you not see the homepage? or look at the screenshot above?

Themeco recommended this update above - it has created far bigger problems that it was supposed to solve and the site is now down.

I would be really grateful if you would urgently take a look at this. Should I reinstall the old theme?

Many thanks,
Alexandra

#16

Hey Alexandra,

We understand that it’s frustrating to see your site break but we need to know if this an issue with Pro. Please activate the parent theme and deactivate Content Views plugin. If that does not help, please 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.

If that could not be done in your test site, please copy your site over to a staging server so we could troubleshoot without interrupting your site operation.

Thanks.

#17

Dear Christian-
Thank you for your help. No, I am not using Pro- but X.
The plugins did not seem to be the source of the issue.
I activated the main X theme -and not the child- and this solved the problem for all of the pages, apart from the following 3 pages

https://www…com/principles/
https://www…/high-street/
https://www…com/highlands-small-communities-housing-trust-survey-reports/.

Also, because I am not using a child theme, I am now missing my titles to the blog articles, and Google Tag Manager tracking code.

I am super grateful to you for having a look at this,
Kind regards,
Alexandra

#18

Hello There,

I have inspected the given page urls and I found several incorrect html code which you have inserted in the page.

Unclosed tag:

Incorrect use of tags:

And lastly, you placed an orphaned closing </div> which could messed up the page and the reason why your footer is displaying incorrectly.

Please edit your pages and make sure to correct it.

#19

Dear Alexander,
Many thanks for your help with this and sorry for my sloppy mistakes.

I’ve made the changes you suggested and it is displaying fine now.

I am really grateful to you for finding them. The same problem appears on other pages when the child theme is installed- is the cause likely to be the same?
Kind regards,
Alexandra

#20

Hey Alexandra,

Thanks for updating in! All this errors is not caused by a child theme. The problem will always appear when using the parent theme or the child theme because the issue is within the contents of the page. This is the result of the broken html inserted on the pages.

Regards.

#21

Dear Rue,
I have modified the navbar to collapse on a desktop according to a post in the forum, and this was working fine for the past year or so.

}
.x-nav-wrap.desktop {
display: none;
}

.x-btn-navbar {
display: block;
float: right;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
display: block;
}

.x-navbar {
border-bottom-color: transparent !important;
box-shadow: none !important;
background-color: transparent;
}
.page .masthead {
left: 0;
position: absolute;
right: 0;
top: 0;
}

.x-nav-wrap.mobile {background-color: white !important;
}

.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
padding: 3%;
margin-top: 8rem;
-webkit-box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.5);
box-shadow: 6px 7px 5px 0px rgba(0,0,0,0.5);
}

Then it linked to nowhere so I followed the advice of the post mentioned above added this snippet:

@media (max-width: 1024px) {

.masthead-stacked .x-btn-navbar {
display: inline-block;
}

.x-nav-wrap.desktop {
display: none;
}

.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile {
display: block !important;
}

.x-nav-wrap.mobile.collapse,
.x-nav-wrap.mobile.x-collapsed {
display: none !important;
}

}
and it is still not working.
Do you have any ideas?

Many thanks for your help,
Kind regards,
Alexandra

#22

Hi again,

Please use this code instead:

@media screen and (max-width: 2000px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

Hope this helps!