Archive: April 2024

We are upgrading a Joomla 3 website to Joomla 5 and keeping a Gantry template, and when testing the mobile view we noticed the mobile menu wasn’t showing up. This drove a bit crazy, but we were able to get it resolved. Once resolved we needed to work with the “custom.scss” file to use Media Queries to make it perfect

The secret here is in the layout section of the template click on the gear or options of the Menu Particle. At the bottom of the options you will see “Mobile Target“. This will make this menu the mobile menu. Here is a link to the instructions from Gantry.

https://docs.gantry.org/gantry5/particles/mobile-menu

Let us know if this helped you…

We were upgrading some Joomla 3 sites to Joomla 5, and fortunately Gantry 5 is ready for Joomla 5. We needed to use a Media Query, but just putting it our CSS override files wasn’t working. These Media Queries were working in our Joomla3 / Gantry 5. Gantry has great documentation and we found our answer here.

https://docs.gantry.org/gantry5/tutorials/media-queries

Gantry has funky methods for overrides, and that you will need to work with the file structure. You will need a “custom.scss” file put into your theme. The path is: “your site root/templates/g5_hydrogen/custom/scss“. We mainly had an issue with the mobile menu icon not showing up in mobile mode. We started with the following lines in our “custom.scss” file:

// import breakpoints
@import “dependencies”;

// Mobile Menu Breakpoint
@media only all and (max-width: $breakpoints-mobile-menu-breakpoint) {

Your CSS Classes go here

}

@import “nucleus/mixins/breakpoints”;

From here it was normal CSS. The secret is to put it in the “custom.scss” file, and to follow the syntax that Gantry provides. We provided a link above to their instructions.

Let us know if this helped you …

We like using Joomla over WordPress when it comes to portals, so while working on a site we ran into an issue where some Fontawesome 5 Free fonts were not showing up. The template framework Gantry has the capability for Fontawesome built-in. This comes up periodically and here are some tips you can try if you run into this issue.

• Choose “Font Awesome 5 Free (Webfont / CSS)” in the settings.
• In your CSS class use the font family “font-family: ‘Font Awesome\ 5 Free’;“
• In your CSS class right after the font family set the font weight to: “font-weight: 900;“

We moved to “Font Awesome 5 Free (SVG / JS)“, but we lost our CSS styling. We had buttons with a red background and that was lost. When we switched it back to “Font Awesome 5 Free (Webfont / CSS)” we were able to style the way we pleased.

The next issue we had was only the code was showing over the symbol. We had the correct font-family, but we had the font-weight set to “normal”. You must set the font weight to be: “font-weight: 900;“; otherwise, you will see the following.

Let us know if this helped you….