2 questions about Simpli template

fairyjo

Hello, I'm using and exploring the Simpli template and I would like to understand some things that are not explained in the documentation.

When using the Search field where it should be, next to the navigation (like on the demo Home magazine), the menu completely disappears when opening the website on a smaller screen, like a smartphone or iPad mini.

Has anyone found a way to make the search field disappear when the collapsible menu comes up? Maybe that should be modified in the template itself next time it is updated.

My second question is about understanding the template Theme Customizer. There's a section Module Styles with 3 different styles. I tried but couldn't find a way to make them work and also there is nothing on the documentation about it: https://www.joomlart.com/documentation/joomla-templates/ja-simpli#config

Is there some other documentation that I haven't found? Or can someone explain how this works? And maybe add this info in the template documentation would be nice for the next person looking for this info.

Thanks a lot if you have the info I'm looking for, cheers, Joanie

saguaros

Hi Joanie,

There seems to be issue in this Home Magazine style, you can create a new css file called custom.css in this directory: [ROOT]/templates/ja_simpli/css/

and add this custom code into this file:

@media only screen and (max-width: 992px) {
	.magazine .navbar [class*=span] {
		width: auto !important;
	}
}

Regarding to the 2nd question, we are sorry for this lack of info in our documentation, in that section you can add the ID of the module you want to apply style. For example, on the Home Magazine style page, there is a module has ID of 125, and you want to apply Module Styles 1 to this module, you use this: #Mod125

I hope this helps.

fairyjo

saguaros
Hello and thanks for the custom code.

I did as explained but the search field still appears on my phone when I load the page and so there still is no menu. I'm afraid that people won't be able to browse the website since more and more are doing so with their phone nowadays.

Also, all I want is to suppress the Search field when on a small screen. As in fact I'm not using exactly the magazine template, I have customized the default Simpli template and added the search field in the top which looks good on a computer but is just a pain on a smaller screen. I tried moving the search field in another module position, but it doesn't look good at all anywhere else.

As for the Module Styles, thanks for the explanations, I can't wait to try this. We do have a special spotlight module coming up and I'll have to customize it so it will be great to use this. Thanks a lot.

Looking forward to your advice on the search field issue.
Cheers, Joanie

PS: please note the website is now live, no subfolder anymore. I'm updating the data at the top of my thread.

fairyjo

After playing with the css I finally got the solution with the help of a colleague and internet. And we managed to keep the search field and display the burger menu as well this way.

@media only screen and (max-width: 992px) {
	#mainnav [class*=span] {
    	width: auto;
	}
}

May I suggest you add this code to the the main css next time you update the Simpli template?

You can mark this thread solved. Thanks a lot.
Cheers, Joanie