Docs

[taxwebmaster]

Hi. Here’s my setup:

I’m using a plugin called Custom Sidebars to put a sidebar wherever I need.
I put a vertical Ubermenu inside a custom sidebar to use as a left side menu
I have a regular page (not Cornerstone) with text on the right.

It all works as it should until I shrink down the page enough for the Ubermenu responsive hamburger menu to appear. Instead of appearing above the content, it appears below it, which obviously won’t work because people won’t see it. Is this a common problem with an easy solution? Or do you think it might be related to the Custom Sidebar plugin?

I’m sorry I can’t give you a link to the page and I can’t give you login info (it’s on a private dev server, and it’s for a government agency with strict access controls.) But here are a few images that might help.

One shows the page in normal view
Two shows the page in narrow responsive view
Three shows the code, which I notice has the <div class=”x-main right> ABOVE the <aside class=”x-sidebar left>

I’m running the latest versions of WP, X, Ubermenu, and my third-party Custom Sidebars plugin.

[taxwebmaster]

This reply has been marked as private.

[Christian]

Hey there,

It sounds like you might be having an issue with a third party plugin (Custom Sidebars). Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[taxwebmaster]

Thanks for the quick response. I disabled the third-party plugins to test. So I’m not using Ubermenu or Custom Sidebars plugins. However, I’m getting the same problem: when the page is shrunk down or viewed on a mobile device, the menu in the sidebar appears below the rest of the main content. So it appears that it wasn’t a plugin problem. Do you have any additional suggestions? And sorry again that I can’t give you a login to my site.

[Jade]

Hi there,

We could try adding a CSS code that target the burger menu so that it will display on the right but we will need to have the at least the URL of your site so that we could check the correct CSS selector for the burger element. You may set your response private so that it will only be visible to the staff.

Thank you.

[taxwebmaster]

Unfortunately, you can’t even get to our site outside our building even if I gave you the URL. But here’s a screenshot of the code in question. I think the selector is probably aside.x-sidebar.left

Thanks again.

[Rad]

Hi there,

I’m trying to understand the cause based on your given information. But I can’t think any possible cause why it appears within the sidebar structure. Do you have custom javascript? It’s too far from the header, and the sidebar is a placement for widgets unless you added it as a widget?

I can only fully check it if I could see your live URL.

Thanks!

[taxwebmaster]

Again, I’m sorry I can’t show you the live URL. The new dev site I’m working on is not accessible outside our firewall—not even for me, and I’m the developer! Only our old Joomla site is visible.

Yes, it’s a custom menu in a widget. Maybe that’s the cause. So maybe I’ll ask this: I did it this way because I’ll have many custom menus on different pages throughout the site. It’s a big informational site (over 100 pages) and each section has its own sidebar menu. For that reason, I can’t just have one common menu in the sidebar for all pages. So can you suggest a way using the Renew stack that will allow me to have at least a dozen different sidebar menus, all of which appear on different pages throughout the site?

The only way I could figure out how to do this was to put custom menus in widgets, then place those widgets on various pages. If there’s an easier way, I’d love to hear it. (This is one area where Joomla, despite all its warts, worked a little better.)

Thanks again.

[Nabeel A]

Hi again,

Try adding the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.ubermenu-skin-clean-white.ubermenu-responsive-toggle:hover {
    background: transparent !important;
}

.ubermenu-skin-clean-white.ubermenu-responsive-toggle {
    font-size: 20px !important;
    text-align: center !important;
}

@media screen and (max-width: 979px) {
.masthead-stacked .x-btn-navbar {
    display: none !important;
}
.x-nav-wrap.mobile {
    display: block !important;
}
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[taxwebmaster]

That targeted the top (main) menu, and opened it up when on a small screen width. It didn’t affect the sidebar menu. It’s the sidebar menu that I’m having problems with. See the attached which shows the full-size screen, and the narrow-width screen. It’s the light blue hamburger menu at the bottom of the narrow-width screen that should be appearing above the content. Thanks again.

[taxwebmaster]

Here’s what I think is the problem: the sidebar is loading AFTER the main content, so when the screen is small, the hamburger menu appears below the content. Please look in the screenshot I’ve provided. The highlighted <aside class=”x-sidebar left”> should be ABOVE the <div class=”x-main right” role=”main”>.

Where in the renew stack can I re-arrange that?

(PS: I’m not an expert, but I’m fairly advanced in this; I’m not using a shared hosted account; this is running on our own server and I have full access to the server and can edit code as needed.)

Thanks again for all your help.

[Jade]

Hi there,

You could override it through child theme. The file is wp-index.php which you can find in /wp-content/themes/x/framework/views/renew/.

Hope this helps.

[taxwebmaster]

Thanks a lot, that worked! I edited the files in the child theme. For some reason, I needed to edit wp-page.php and template-layout-sidebar-content.php rather than wp-index.php. But in any case, it works now. I appreciate your help.

[taxwebmaster]

This reply has been marked as private.

[Nabeel A]

Hi again,

I’ve made your post private. We’re glad we could help you 🙂

Cheers!

[Author]

Posts