Changing off-canvas menu to main position (beyond homepage)

saguaros

Did you change in other file too? as when I reverted above change, it still not show the off-canvas icon on mobile, the mockup seems to be different from the default.

cemsdb

saguaros Please check again, as I just made sure both your suggestions were followed correctly.

As you'll see, the blue bar/menu no longer appears in both the side and the top. The cause of this is the suggested changes in the mainnav block, because when I revert it back to default, the menu/blue bar reappears on the top.

I also just checked the template demo, and the menu/blue bar also clearly appears on the top of small screens.

cemsdb

saguaros Keep in mind, this issue occurs in all pages, except the homepage. There's no blue bar or navigation (menu icon) in all other pages when using a small device (mobile, etc).

saguaros

I found the issue, it did not show on mobile as you disabled Off-canvas option in navigation settings of template.

I enabled it for you, kindly check.

cemsdb

saguaros Hi Saguaros,
Though I noticed the menu did indeed appear on small screens, I also noticed the off-canvas menu in the homepage is suddenly missing. A bit lost, I imagined other edits had been made and decided to start over by simply copy-pasting the exact code you suggested above (for the mainnav block) and, alas, the blue bar w/menu once again stopped showing up on all pages (except for homepage).

Can you please kindly check? Any chance other edits have been made?

At any rate I started over, followed all the exact instructions in this thread and still have the same issue (even with the Off-Canvas menu option enabled)

saguaros

As I can see that you set the custom css to hide the left navigation, I updated it a bit so it can apply to default layout only, the homepage is showing normally now:

@media (min-width: 577px){
  .layout-default .horizontal-nav {display: none;}
}

cemsdb

saguaros Thank you Saguaros, the homepage is indeed showing normally now.

What about the issue with all the other pages and the lack of the blue bar (+menu) for small screens? Your previous solution did not actually solve the problem. Please check.

saguaros

The above css code fixed the issue so don't need to remove the code for the blue bar in mainnav block. I reverted for you and it's showing now.

cemsdb

saguaros Apparently the above css code alone didn't fix the issue, as the offcanvas-menu (side blue bar) is now showing on every page while viewing on desktop (/large screens).

The goal is for every page (except the homepage) not to show the side blue bar and show the top menu instead (on large/medium screens). While on small screens, the top blue bar (+menu) will show up.

FYI, something very weird is happening with the custom.css file (/templates/ja_colab/css/). I recently added a lot more edits, but they're not being applied (*I cleared every possible cache). Upon further investigation I found a "Edit Custom CSS" function in the template settings (under "Tools"), and it's showing a difference Custom file (which just so happens to have your added code, but not mine). I'm confused, what's happening here? Can u check my custom.css file and confirm that it is indeed different than the one showing up in the template settings?

saguaros

cemsdb

There are 2 places for adding custom.css file:

/templates/ja_colab/css/
/templates/ja_colab/local/css/

the edits you made via "Tools" in template settings will be store in: /templates/ja_colab/local/css/custom.css file so kindly edit this file from now on.

cemsdb

saguaros OK, thanks.

1) Can you explain the benefits of storing custom.css in the "local" folder?

2) Is the "local" approach better for this specific template, or all of them?

3) If there are two different custom.css files on both locations at the same time will the template be affected by both (or only one, while the other is ignored)?

4) Will there by any issues with template updates?

saguaros

cemsdb Hi

T4 based templates like JA Colab are built with SCSS, when you customize SCSS files (only if you're familiar with this coding), it'll be compiled to CSS files and store compiled css files in local folder of your site so that when you update new version of template, your customization will not be affected.

The 'custom.css' file in local folder will be used in priority and both files are not be affected when you update template. However, you should keep 1 file only 🙂