Onepage menu not working

[Bowe]

I had installed a onepage menu on this website:

Officiële website van toetsenist en componist Ton Snijders uit Velp

But now it doesn’t work anymore. I had also saved a custom CSS file because that was needed at the time to get it to work. My assumption is that it was overwritten after an update. At the time I didn’t succeed in getting it to work with a child theme. Now I’m completely lost, help would be really appreciated!

I added this custom CSS then:

/*
// Base.
*/

h1, h2, h3, h4, h5, h6 {
line-height: 1.2 !important;
}

.h-resp-main {
max-width: 15em;
margin: 0;
}

.h-resp-main.cs-ta-center {
margin-left: auto;
margin-right: auto;
}

.h-sup {
display: block;
margin-right: -0.15em;
margin-bottom: 0.5em;
font-family: “Open Sans”, sans-serif;
font-size: 0.3em;
font-weight: 300;
letter-spacing: 0.15em;
line-height: 1.6 !important;
text-transform: uppercase;
color: inherit;
}

.h-resp-main > span {
display: block;
}

.h-resp-main a {
display: block;
padding: 10px 0px;
margin-right: -0.15em;
margin-bottom: 1em;
font-family: “Open Sans”, sans-serif;
font-size: 0.675em;
font-weight: 300;
letter-spacing: 0.15em;
line-height: 1.5 !important;
text-transform: uppercase;
color: #e44065;
}

.h-custom-headline hr {
width: 50%;
max-width: 300px;
height: 3px;
margin: 1.5em 0 0;
border: 0;
font-size: 0.3em;
background-color: #e44065;
}

.h-custom-headline.cs-ta-center hr {
margin-left: auto;
margin-right: auto;
}

.h-custom-headline p,
.h-custom-headline br {
display: none;
}

/*
// Header.
*/

.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none;
}

/*
// Buttons.
*/

.x-btn {
padding: 0.65em 1.25em !important;
font-weight: 700 !important;
text-shadow: none !important;
}

/*
// Background Overlay.
*/

.x-bnb-bg-overlay {
position: relative;
overflow: hidden;
}

.x-bnb-bg-overlay:before {
content: “”;
display: block;
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(0, 0, 0, 0.75);
}

/*
// Image Grid.
*/

.x-bnb-image-grid {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-align-items: stretch;
align-items: stretch;
margin: -10px;
}

.x-bnb-image-grid > a {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-flex: 1 1 360px;
flex: 1 1 360px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 10px;
min-height: 300px;
font-size: 2rem;
box-shadow: 0 0.25em 1.5em rgba(0, 0, 0, 0.35);
}

.x-bnb-image-grid > a:before {
content: “”;
display: block;
position: absolute;
z-index: -1;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
background-color: rgba(21, 21, 21, 0.65);
transition: background-color 0.5s ease;
}

.x-bnb-image-grid > a:hover:before,
.x-bnb-image-grid > a:focus:before {
background-color: rgba(21, 21, 21, 0.35);
}

.x-bnb-image-grid > a:hover > .bg,
.x-bnb-image-grid > a:focus > .bg {
transform: scale(1.1);
}

.x-bnb-image-grid > a:hover > div > small,
.x-bnb-image-grid > a:focus > div > small {
color: #ffffff;
}

.x-bnb-image-grid > a > .bg {
display: block;
position: absolute;
z-index: -2;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-size: cover;
transition: transform 0.5s ease;
}

.x-bnb-image-grid > a > div {
width: 100%;
padding: 1em;
font-size: 1em;
line-height: 1;
}

.x-bnb-image-grid > a > div > span {
display: block;
overflow: hidden;
font-size: 1em;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
color: #ffffff;
}

.x-bnb-image-grid > a > div > small {
display: block;
overflow: hidden;
margin: 0.35em 0 0;
font-size: 0.575em;
font-weight: 700;
letter-spacing: 0.065em;
line-height: 1.4;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
transition: color 0.5s ease;
}
.x-scroll-top {
border: 2px solid red;
color: red;
opacity: 1;
filter: alpha(opacity=100);
zoom: 1;
}
.page-template-template-blank-1-php .x-slider-container.below, .page-template-template-blank-2-php .x-slider-container.below, .page-template-template-blank-3-php .x-slider-container.below, .page-template-template-blank-4-php .x-slider-container.below, .page-template-template-blank-5-php .x-slider-container.below, .page-template-template-blank-6-php .x-slider-container.below {
border-bottom: none;
}

}

[basanta]

Hi There,

Thanks for writing in!

I can see there is several JS error in the page which is causing the issue.

As I don’t have access to your admin can’t confirm which is causing the JS error. Would like to suggest you few things for a possible solution.

Please check for the following first:

1. Test 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.

2. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

3. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

4. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

Cloudflare. If you are using Cloudflare please disable this for testing purposes. Cloudflare by default enables an auto minification function to compress the JS and CSS files of the theme. As the theme already serves minified files, re-minifying said files only cause to break the entire site.

Custom code syntax error. If you have a child theme, please enable the child theme and check if the issue still exists. If you have entered any custom JS or CSS into their respective editors. Please review the code for any syntax errors. A misplaced semi-colon or a missing bracket will cause the issue you’re seeing.

If you could please try the above and if you still have the issue we’d be more than happy to assist.

Please provide following information:
Set it as Secure Note

• Link to your site
• WordPress Admin username / password
• FTP credentials
  All the best!