Using Media Queries in Gantry Joomla

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 …