Canvas Support

Mobile menu as left sidebar in light colour

10 replies · opened Nov 25, 2019

Aanke30Nov 25, 2019

Hi,
thanks for your answer.
I switched now from the "Comments" section, because I think my questions belong to this support section.

I was asking for a mobile menu that appears as a left sidebar and now I found it within your theme:
http://themes.semicolonweb.com/html/canvas/side-panel-left-overlay.html
This is exactly what I want.

  1. But how can I replace the existing mobile menu with this one? Because here (http://themes.semicolonweb.com/html/canvas/side-panel-left-overlay.html) there are 2 mobile menu sections in the mobile display. I want the menu icon (the "3 small lines") to be on the left side, and with the mobile menu opened as a sidebar from left in light colour.

  2. So I want it to be light, not dark. So I tried to delete " class="dark" but it didn't work out, it's still dark.
    I checked also your http://themes.semicolonweb.com/html/canvas/side-panel-light.html, which is light colour. But this menu appears from the right side. By the way, I think it's a mistake that you describe this as "Side Panel Pushed from Left". It should be "pushed from right". But anyway, so I checked the code and tried to make this change:
    "<body class="stretched side-push-panel">" to -> "<body class="stretched side-push-panel-left">" because this is the code from the dark menu that appears from the left side. But it also didn't work out.

So how must I change the code ?

Thanks for helping.

Aanke30Nov 26, 2019

Perfect, thanks a lot, that's exactly what I meant.
I see you added some extra code lines, so now I understand it wasn't possible to simply combine the 2 variations "left" and "light" like I tried to.

I just tried to write these new "style" code lines into style.css to avoid to write it into every page and it seems to work out so far (I added it to the section "Side Push Panel", I suppose this/the position isn't important anyway?).
Or could this cause some problems / interference later on?

Is it possible to make this mobile navigation menu sticky (like the desktop navigation)?

SSemicolon WebSTAFFNov 26, 2019

Hello,

The Extra Line of Codes were added to make the Side Panel Trigger's Hamburger Icon stick to the Left of the Logo replicating the Default Primary Menu Trigger. Adding the CSS Codes to the style.css File is not recommended as then it would be difficult to manage Future Updates. It is therefore recommended to use the css/custom.css File. More details on how to use this File can be found in the Documentation > Start > Customization Section.

To make the Header Sticky on Mobile Devices, simply add the .sticky-responsive-menu Class to the <body> tag. Example:

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aanke30Nov 27, 2019

Alright thanks.
Why are some of the css files not in the css folder but in the main html folder? Can I just copy them into css folder?

I just bought some more licences cause I want to make several different small websites. Where do I write the different licence codes?
And must I use one download per one website or can I use the same download to build my 10 websites? Would be better this way, cause I needn't do the changes every time again.

And one more question: I'm thinking about making several sub categories to have a better organization. I mean this:
-html(maincategory)
--firstsubcategoryfolder (with some files and further categories)
---firstsubsubfolder (with some files and further categories)
----firstsubsubsubfolder (with some files and further categories)
-----firstsubsubsubsubfolder (with some files)
--secondsubcategoryfolder
---secondsubsubfolder
----secondsubsubsubfolder
...
--thirdsubcategoryfolder
---thirdsubsubfolder
...
etc.

Can I do it like this or would there be a problem with your theme? Especially with the links to the css files, as some of them aren't in the css folder but in the main folder.

Thanks for helping.

Aanke30Nov 27, 2019

..and I just tried the sticky menu with your code, but it didn't work. Maybe because now there are 2 body class codes now ?

I made it like this:
<body class="stretched side-panel-left">
<body class="stretched sticky-responsive-menu">

Must I put these 2 codes together? How?
And what is "stretched" for ?

SSemicolon WebSTAFFNov 27, 2019

Hello,

Thank You so much for Purchasing Additional Licenses for Canvas! We really appreciate it and hope that you enjoy building Websites with Canvas! :)

  1. The style.css File is the only CSS File that is in the Main Folder since it is the main CSS File and moving it to the css/ Folder should not have issues except you will just need to change the locations of the linked background images within this CSS File to their correct locations.

  2. We already have your License Information since this Support Forum is directly linked to your ThemeForest Account. Absolutely, you can use the same Download for your Different Websites as long as you have an additional license per website.

  3. If you are planning to use Sub-Folders for your Website with HTML Files inside them that link to the CSS/JS/Images or any asset, then it is recommended to use Absolute URLs for the assets. Example: Instead of css/bootstrap.css File that is linked in your Document <head>, use the Full URL of the Location of this File, ie. https://your-website.com/css/bootstrap.css . And this can be applied in the same way to all other assets as well. But it is recommended to use the Same Domain for this where your HTML Files are hosted to avoid CORs issue.

  4. For the Responsive Sticky Menu, use the following code:

You cannot have multiple body Tags in an HTML Document. Make sure that you always Validate your HTML for errors here: https://validator.w3.org/, so that you never face any unexpected issues with your Website.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aanke30Nov 27, 2019

Thanks a lot, the sticky menu now works perfectly.
I just tried your hint with the validator site, and there appeared an error:
Error: Bad value https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Raleway:300,400,500,600,700|Crete+Round:400i for attribute href on element link: Illegal character in query: | is not allowed.

But I suppose every website has some errors in it, and as a non-programmer I just don't know which ones are important :)

Ok thanks, then I will move the style.css into the css folder and then change the location of the style.css within the several sites and then change also the locations of the images within the file itself, so for example:
background-image: url("images/icons/submenu.png");
-> to
background-image: url("../images/icons/submenu.png");
Right?
And that's all? Moving this so important file won't harm the website? Or will the website get slower?
I'm not a programmer that's why I ask this, sorry.
Is there a reason why you didn't put it into the css folder from the beginning?

But there is not only this 1 css file in the main directory, there are more:

  • style-import.css
  • style-rtl.css
  • style-rtl-vars.css
  • style-vars.css

These files aren't needed? Are these older files from older versions and can I delete them?

Thanks for the idea to use the full URL when I want to use sub-folders, does this make the website slower ? I mean does it infect the page speed?

I like to use the <?php include ("xxxx/xxxx.php") ?> code, so is it ok, when I just rename all of your .html files into .php ?

Thank you!

SSemicolon WebSTAFFNov 28, 2019

Hello,

  1. This error can be ignored since this code is directly from Google Fonts Official Website and there is nothing to worry about this as it will not affect your Website's Performance . Make sure that you look out for the errors related to Duplicate IDs and Unclosed Tags.

  2. Perfect. No! Not at all. This will not affect your Website's speed. Everything will work fine. The style.css File was put into the Main Folder due to the way WordPress Themes are structured.

  3. You will just need to use the style.css File. style-imports.css and style-vars.css are variants of style.css and you wont need it if you are just a beginner. While style-rtl.css is used only for RTL Websites. So you can delete these files.

  4. This does not affect your Website's Speed. You can consider checking out the Documentation > Start > Optimization Tips Section to see more about Website Optimization.

  5. Absolutely! You can rename the .html to .php if you would like to use the Files as PHP to use PHP includes. Will work just fine.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Aanke30Nov 29, 2019

Thanks again for your answers. I think I can start now.

I just want to tell you, that your support is great. I like your precise and competent help, and that you answer all my questions (not only 3/5 or something like that). Keep it that way, it's great!
Thanks.

SSemicolon WebSTAFFNov 30, 2019

Hello,

Thank You so much for the Kind Words! :)

Please don't say thanks! It is our job to answer each and every question you ask us. :)

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard