Staff replied Templates

Off Canvas Menu

Asked by angelo 2 years ago Last activity 2 years ago

I edit everithing on the back end correctly, as you have it on original themis template but I cannot see the off canvas when I make the page smaller. I cannot see it on mobile as well. Please advice

11 replies

Paul Frankowski Senior Staff

Hi Angelos,

Add that Custom CSS:

.burger-icon { width: 25px; cursor: pointer; }
.burger-icon > span {
  display: block;
  height: 2px;
  background-color: #eee;
  margin: 5px 0;
  transition: background-color 0.3s ease-in, opacity 0.3s ease-in, transform 0.3s ease-in;}
angelo Asked this

Thanks for your prompt reply sir, I apreciate it. Similalry, thanks for providing support on Sunday!

I added the code you gave me and indeed I can see the 3 horizontal lines with the menu next to the menu. However, there are some problems.

  1. Why I should add a code in order to see the menu that supposed to see in any case? In your original template I cannot see these 3 horizontal lines but if I make smaller the page then I can see them , LINK: https://www.joomshaper.com/joomla-templates/themis

  2. This custop code fixs one problem and create another one! As in the original website I have anothe module for social icons and copyrights. Could you please help me fix my website as the origical themis template? So it will no need to custom code.

Thanks in advance

Paul Frankowski Senior Staff
  1. I don't know why. Just put it inside custom.css file.
  2. I gave you answer on 2nd topic.
angelo Asked this

No no . You didn't reply well. This is not a helpful answer!
Tell me how can I fix it. Why the template is not working propertly.
Seach it or ask from a more serious person to check it.

Toufiq Senior Staff

Hi there,

I apologize for any interruption. I've investigated the off-canvas issue using a mobile device, and it appears to be displaying correctly. Could you please review the screenshots I've provided and confirm if everything is in order? Thank you for your understanding.

IMG_2D7C3269965C-1.jpeg

IMG_E9C745B4CC25-1.jpeg

Best regards,

Toufiqur Rahman (Team Lead, Support)

angelo Asked this

Hello Toufiq,

How are you doing?
Some time ago you added some extra code on my website https://www.rules-chess-strategies.com/en/ to see the Language Switcher module on offcanvas menu and on the top of my website , you can see the picture here: https://ibb.co/VJdccSW

Please note:
I use hikashop registration page.
I use the log in page , LINK: https://www.rules-chess-strategies.com/el/profile-gr

When I log in to the website it direct me to english website automatically.

The page created with page builder. I'm loading a menu there "hikashop user control panel".

I was searching the menu and inside the menu "hikashop user profile" (in greek version) I cliked the option "Default Page" to yes. Then the code changed and I cannot see the language switecher on ther top menu on my website.

Please advice.

angelo Asked this

You gave me some custom css that I can see in the file "/templates/themis/css/custom.css

.close-offcanvas {
position: absolute;
top: 30px;
z-index: 1;
border-radius: 100%;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
font-size: 14px;
color: #000000;
}

.itemid-191.com-sppagebuilder #sp-main-body {
padding: 80px 0;
}

.com-sppagebuilder #sp-main-body {
padding: 80px 0px;
}

section#sp-section-3 {
display: none;
}

sp-top-bar+#sp-header {

padding-top: 29px;

}

div#sp-menu .sp-module.top-lang {
width: 35px;
float: left;
display: inline-block;
margin-top: 24px;
}
div.mod-languages img {
border: none;
display: inline-block;
width: 30px;
}

Toufiq Senior Staff

It was solved. What you did? Please let me know. Did you change anything? Thanks

angelo Asked this

Thanks for your message and support!

I can see that it's correct on greek page but I cannot see in to english page... Can i fix it by meself with your guiding?


What I did? Here is the answer.
When I log in to the website it direct me to english website automatically. This is a problem and I'm working on it. https://www.rules-chess-strategies.com/el/profile-gr

The page created with page builder. I'm loading a menu there "hikashop user control panel".

I was searching the menu and inside the menu "hikashop user profile" (in greek version) I cliked the option "Default Page" to yes. Then the code changed and I cannot see the language switecher on ther top menu on my website.

I changed the "Default Page" to yes I saved it. Then I change it again to no and saved it. Then I notice that the flag was missing at the top.

I didn't changed anything else!

It will be very useful to me to explain how to fixed the issue.

Thanks in advance,
Angelo

Toufiq Senior Staff

General login redirect works fine and Hikashop is not our product. Will you please contact Hikashop support? That would be better for your solution. Thanks

angelo Asked this

The problem is that I cannot select a default page for english and for greek page!! How can I do that? It's not working with the normal way...

angelo Asked this

OK i fixed the issue. I should not have the menus of default page, english default, and greek default at the same menu!

angelo Asked this

"General login redirect works fine and Hikashop is not our product. Will you please contact Hikashop support? That would be better for your solution. Thanks"

Ironically they say the same thing!! You can see my mail here:
https://ibb.co/172H55Z

And no the login redirect is not working OK. Something cost the problem. Please check it because I'd like to be 100% that page builder is not creating this problem.

Toufiq Senior Staff

Enable the Login menu and check it from the front end.

angelo Asked this

Hello Toufiq,

No problem. Thank you very much for your time and efforts! I'm not sure what you did but now it's working much better!

Inside the template and options (in both English and Greek) I added a logo for mobiles. Hence, When I make the page smaller it should normally show the logo at the top; am I right?

I have 4 modules as you can see in the attached images. After your corrections - check the Greek offcanvas menu is OK. The english off-canvas menu is without social icons (without module 226. Am I doing something wrong or I should wait until my server cleans the cache?

https://ibb.co/dgcRh2f
https://ibb.co/N71sXbv
https://ibb.co/T48dF2C
https://ibb.co/Bnzgw3j

Toufiq Senior Staff

If you want to show your logo on off-canvas then you need to create a custom module from the module manager then insert your logo then select the module position of off-canvas. I would request you to check your site on real time device for off-canvas issue. Thanks

angelo Asked this

Ok thank you!
You solve the off canvas issue, thank you!

Toufiq Senior Staff

Please check the off-canvas logo. Thanks

angelo Asked this

Thank you very much sir, it's working just fine, thank you! As you mentioned a module needed; thanks for creating his.

I have a question regarding the logo and social icons below the menu. I'm attaching 3 images.

https://ibb.co/P6sPj9q

https://ibb.co/SyfFjns

https://ibb.co/PYMGgWK

On the modules you can see everything. The logo is working on english page but it's not working on greek page https://www.rules-chess-strategies.com/el

The social icons work and be visible on greek page but they are not visible in english page. Maybe some time needed in order to be uploaded correctly to the server.

Your advices are welcome.

Thanks again for your help and support!

Toufiq Senior Staff

Please check now. Thanks

angelo Asked this

I don't know what you did but it's working just fine! Thank you sir!
Everything is perfect here and the offcanvas menu works just fine in all languages

Toufiq Senior Staff

Your greek off-canvas social icon text addon wasn't there. I just exported the JSON file from the greek module and then imported the JSON file inside the English module. Thanks

Log in to reply.