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.

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 …


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Translate »