I cannot get the sidebar navigation to display

Hi Brian,

I added the XML as described in your documentation here:
https://www.ubertheme.com/docs/ub-mega-menu/
like this:
…
but it refuses to display anything on the sidebar.

I’ve checked and saw that the XML code you quoted referred to the menu group key ‘cat-callout-menu’ displayed in the ‘page.top’ position on your theme. Thus, it’s not displayed on the sidebar position, even when you view a page with the sidebar enabled. 
 
Please follow our guide on how to configure and show a vertical menu here. If the issue still persists, then let me know. 

Best Regards,
Ziven.

Hi Brian,

I added the sidebar menu but as I explained it is all messed up (as if it isn’t reading the modules CSS).  See examples of this here:
Screenshot of menu only:
https://drive.google.com/open?id=17F3Xromwm5BV2FIqpo8VG21fQla1C5rG
Screenshot 2 of menu:
https://drive.google.com/open?id=19Q1N8MVH9vlOTVo4CdjB1yRtHan3pEux
Screenshot 3 of menu while hovering:
https://drive.google.com/open?id=1uEsHH-kWHZK50-VQmIBNuVLSe4GcRWqI

I could not view the screenshots you provided above. 

However, I tried to check directly at this url: https://elenis.shop/gifts and see that the menu was not displaying like our demo (since you already customized the file: app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_horizontal.less).
 
I could not connect SSH to debug further, it seems you have changed the SSH credentials shared in this thread. 
 
I am not quite sure what custom changes you made that affect the Vertical Menu. 

Anyway, to show Vertical Menu properly, you should add the style for the menu vertical at your end. 
You can do this by copying this file: app\code\Ubertheme\UbMegaMenu\web\css\source\module\_vertical.less.
and paste to this path: 
app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_vertical.less where you can add your custom style here. 

Best Regards,
Ziven.

Hi Brian, 

There was nothing in this path:
app\code\Ubertheme\UbMegaMenu\web\css\source\module\
However, I found the _vertical.less file here:
app/code/Ubertheme/UbMegaMenu/view/frontend/web/css/source/module
I am still trying to figure out the correct directory to put the _vertical.less file though…

I am sorry for not mentioning about the folder. The correct path is: app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_vertical.less
 
I saw that you already added the file properly at app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_vertical.less

The CSS is added as you can see here:
https://drive.google.com/open?id=1PIgVwgn2dm5aajFPbgijs9KwKPrkxX_w
However, the menu is still messed up like so:
https://drive.google.com/file/d/1mg-xTAV7BGDOYhHNqBSWIETsokKara3k/view

From the file app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_vertical.less, you can add custom style.
Since you already customized the horizontal menu that affected the style of Vertical menu, you should continue to define custom style at your end. We will try as far as we can in case you run across unexpected issue. 

This is an example to edit the file: app\design\frontend\Pearl\weltpixel_custom\Ubertheme_UbMegaMenu\web\css\source\module\_vertical.less at line 60. When opening that file, navigate to the Class name: ul.level0 { ) enter to break line, replace: 

ul.level0 {

with: 

ul.level0 {
    display: block;

Then, in this file, around the line 65, change: 

.mega {
    padding: 0 0 0 10px;

with:

 > .mega {
    color: #333;
    padding: 0 0 0 10px;

After you make changes, you need to re-compile LESS -> CSS: 

You should back up your site first. Once done, you access your server via SSH and navigate to your Magento 2 folder, then run the following commands one by one:
Step 1: php bin/magento maintenance:enable
Step 2: rm -rf var/di/* var/generation/* var/cache/* var/log/* var/page_cache/* var/session/* var/view_preprocessed/* pub/static/frontend/Pearl/weltpixel_custom/*
Step 3: php bin/magento setup:static-content:deploy -t Pearl/weltpixel_custom -language en_US -f (Make sure you are using developer (or default) mode)
Step 4: php bin/magento cache:flush
step 5: php bin/magento maintenance:disable
Step 6: clear your browser cache

Once done, the menu is expected to look like this screenshot: https://www.dropbox.com/s/76xql3bp4bgipny/2019-11-19_08-22-23.png?dl=0

Best Regards,
Ziven.
 

Hi Brian, 
As explained in our reply #10, you need to add the custom style for the vertical menu at your end: 

Since you already customized the horizontal menu that affected the style of Vertical menu, you should continue to define custom style at your end.

As per our standard technical support, customization is beyond the scope of our support. We will try to provide support as far as we can though. 
Thanks for your understanding.
Regards,
Ubertheme team

Hi Eric,

I understand that.  I’m just not sure why changing the horizontal menu should effect the vertical menu as well.  What is the point of even having separate less files if that is the case?

We did inherit the code from Horizontal menu. From here, we overwrite with changes for specific vertical menu.
 
With this approach, horizontal menu code is always required and serves as a code base for the vertical menu. This helps to minimize the code base as well as allow to re-use the existing style of horizontal menu.   

Best Regards,
Ziven.