@EJBJane
Just an idea, but as long as you only have the logo and the search particles in the header (and have moved system messages elsewhere) how about this?
You have elastic search enclosed in a Joomla module with the default .moduletable class, if you do the same to your logo (contain it as a module) then it should be more straightforward to align them horizontally using some Flex.
@yellowwebmonkey is better at this than I, but by applying some flex and specifying the #g-header .moduletable classes it should be a case of aligning them so that there is enough %ge view port left for the off-canvas toggle. The toggle is placed using position absolute, of course.
Just an idea, but as long as you only have the logo and the search particles in the header (and have moved system messages elsewhere) how about this?
You have elastic search enclosed in a Joomla module with the default .moduletable class, if you do the same to your logo (contain it as a module) then it should be more straightforward to align them horizontally using some Flex.
@yellowwebmonkey is better at this than I, but by applying some flex and specifying the #g-header .moduletable classes it should be a case of aligning them so that there is enough %ge view port left for the off-canvas toggle. The toggle is placed using position absolute, of course.
that should give you https://share.getcloudapp.com/o0u8YKoN
@EJBJane Looks like you have a working solution :wink:
Flexbox is really awesome. Highly suggest giving it a go. I mostly learned it from this site : https://flexboxfroggy.com/
@yellowwebmonkey @dmleeman @N8Solutions I think I also found a way to do it with flex, probably not as good as Alexis and with more code. With three modules I got confused . This is the mobile queries I used to slove the problem of the logo in the middle of search and hamburger menu for mobile.
"#g-header .g-container .g-grid { -webkit-flex-flow: nowrap; -moz-flex-flow: nowrap; flex-flow: nowrap; justify-content:space-between; width: 360px; }"
"#g-header div.g-block.elasticsearch-top {display: flex; flex: 1;}"
"#g-header div.g-block.logo {display: flex; flex: 4;}"
"#g-header div.g-block.aanmelding { display: flex; flex: 1;} (not visible at this size) "
"#g-header .g-container .g-grid { -webkit-flex-flow: nowrap; -moz-flex-flow: nowrap; flex-flow: nowrap; justify-content:space-between; width: 360px; }"
"#g-header div.g-block.elasticsearch-top {display: flex; flex: 1;}"
"#g-header div.g-block.logo {display: flex; flex: 4;}"
"#g-header div.g-block.aanmelding { display: flex; flex: 1;} (not visible at this size) "
@EJBJane We each have our own approach, and since my clumsy interruption earlier, did not want to exacerbate the problem by adding anything further.
I tend to use modules throughout my layouts, filling the base Outline with Joomla Modules, inserting the Particles into the modules and then only assigning those Modules to the relevant pages. This way can reduce the page layouts to a minimum.
Then, for any header or navigation flex I specify it as such e.g.
Then, for any header or navigation flex I specify it as such e.g.
#g-navigation .g-container .g-grid {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}
It's a bit of a cover all for the way I build, and would still need some tweaking to work on your design. Go with what works!
This looks like a good option to only accept from specific user https://stackoverflow.com/questions/15671521/block-everyone-except-visitors-from-specific-referrer
for BS4 support, it needs couple of customized css files for BS4
including the slightly modified BS4 css
on the menu issues, i will be working on gantry 5.5 as soon as i can -- but i've been sick for over a month, so i'm a bit behind on everything unfortunately
I have tried installing gantry 5.4.34 and helium in an existing Joomla 3.9.21 site and get a warning saying "can't find XML setup file", and an error saying "Unable to detect manifest file". However, I have no difficulty setting up the Helium Rocket Launcher skeleton site. Ideas please.
@mahagr "gantry itself doesn't use bootstrap at all, anywhere" - yes, tbh I would actively avoid using BS if possible (ie it is not already present in a Joomla component).
Of course, as you pointed out, I don't see BS present in the source code of Hydrogen or Helium. But the Javascript Frameworks Atom does make provision for the inclusion of the Bootstrap framework and have noticed a few posts by developers new to the Gantry system that question whether BS may be 'supported' in some way. I've never used this Atom for BS either but I can see how it may raise questions.
I could have been clearer.
Welcome back too, Matias - I'm sorry to hear that you have been ill again, especially given your bout of illness earlier in the year.
Of course, as you pointed out, I don't see BS present in the source code of Hydrogen or Helium. But the Javascript Frameworks Atom does make provision for the inclusion of the Bootstrap framework and have noticed a few posts by developers new to the Gantry system that question whether BS may be 'supported' in some way. I've never used this Atom for BS either but I can see how it may raise questions.
I could have been clearer.
Welcome back too, Matias - I'm sorry to hear that you have been ill again, especially given your bout of illness earlier in the year.
Hi, just got the updatemessage from Joomla. Clicked to update however it fails , So I tried to intaL THE Gantry package from teh download site. Saying in dutch: Waarschuwing
Kopiëren mislukt: C:\wamp64\www\subsite\tmp\install_5f5790b3a7c74\packages\install_5f5790ba36f40\gantry5.xml naar C:\wamp64\www\subsite\plugins\quickicon\gantry5\gantry5.xml
JInstaller: :Installeren: Kopiëren bestand C:\wamp64\www\subsite\tmp\install_5f5790b3a7c74\packages\install_5f5790ba36f40\gantry5.xml naar C:\wamp64\www\subsite\plugins\quickicon\gantry5\gantry5.xml mislukt
Plugin Update: Kan het instellingenbestand niet kopiëren.
Pakket Update: Er deed zich een fout voor tijdens het installeren van een extensie: plg_quickicon_gantry5_v5.4.35.zip. I am working on my testmachine for quite a while and until now all went ok. I tried also to download the whole package with same result.
The frontend sys: The website front says: Failed to load 'g5_prometheus' template: Please install Gantry 5 Framework!
Kopiëren mislukt: C:\wamp64\www\subsite\tmp\install_5f5790b3a7c74\packages\install_5f5790ba36f40\gantry5.xml naar C:\wamp64\www\subsite\plugins\quickicon\gantry5\gantry5.xml
JInstaller: :Installeren: Kopiëren bestand C:\wamp64\www\subsite\tmp\install_5f5790b3a7c74\packages\install_5f5790ba36f40\gantry5.xml naar C:\wamp64\www\subsite\plugins\quickicon\gantry5\gantry5.xml mislukt
Plugin Update: Kan het instellingenbestand niet kopiëren.
Pakket Update: Er deed zich een fout voor tijdens het installeren van een extensie: plg_quickicon_gantry5_v5.4.35.zip. I am working on my testmachine for quite a while and until now all went ok. I tried also to download the whole package with same result.
The frontend sys: The website front says: Failed to load 'g5_prometheus' template: Please install Gantry 5 Framework!
Hello, I'm new to grav and gantry. I made a layout for my first page exactly as I wanted it. The problem is I want to add a blog list page where I can add articles but the posts show after all the particles I added for the first page. How can I make the blog page, contact and other pages to be simple, whitout the stuff from first page?
@EMSMouna_twitter
Hi Mouna
It may simply be a case of your css rendering the slideshow 'invisible' at a certain breakpoint, so you can override this behaviour by finding the class responsible. But to answer your question fully see below:
There are more advanced methods depending on how far you wish to go. The 'easiest' method is through use of the built-in Gantry5 Utility Classes - http://docs.gantry.org/gantry5/tutorials/utility-classes
This method requires that your replacement image widget, particle or module is added to the same section in your layout - maybe just underneath is best. Then apply the visible-phone class to this replacement. As the breakpoint of the viewport hits mobile width, your slideshow will become 'invisible' as before, and the new replacement should then become visible.
There is a more advanced method that requires some conditional php; and this approach varies with each CMS. I'm familiar with Joomla and often use this more advanced method to prevent unwanted invisible code being called into the mobile view.
:point_up: September 11, 2020 12:47 PM Hello @EMSMouna_twitter If you are using Joomla you can use the DSC extension from Kubik-Rubik. This way you can prevent the slideshow module from loading on mobile and instead load a module with the image you want. The directions on how to do this are located here:
Using DSC to manage Gantry 5 particles or Joomla modules
Using DSC to manage Gantry 5 particles or Joomla modules
As @dmleeman pointed out, Gantry 5 does have built-in utility classes but the only problem with those is that they allow the content to still be loaded but are instead hidden when loaded, whereas the approach with DSC which uses PHP, which is what @dmleeman was hinting at, prevents it from being loaded instead of just hidden.