Templates for Joomla! 5.x • Re: Cassiopeia divide module position topbar into 3 or 4

I should have read better...

There are several ways to achieve what you want.
See if one of the below options fits your needs.

Post the url to the page that displays your modules in the topbar so we can see the code and help you better.

Add the CSS of one of the options below to your user.css file.

Quick tutorial on how to create your user.css file by Tim Davis
https://www.[[[youtube]]].com/watch?v=0c2iNnszWuc

Option 1: Grid - automatically create columns
Modules are placed next to each other. The width of the modules is automatically scaled to fit inside the container.

Code:

.container-topbar {  display: grid;  gap: 1em;  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));}

* Change 200px to your own (minimum) width.

Option 2: Grid - fixed number of columns
Create 4 columns and span the modules accross multiple columns when on small(er) screens.

Code:

.container-topbar {  display: grid;  gap: 1em;  grid-template-columns: repeat(4,1fr);}.container-topbar > div {  grid-column: span 4;}@media (min-width: 700px) {  .container-topbar > div {    grid-column: span 2;  }}@media (min-width: 1000px) {  .container-topbar > div {    grid-column: span 1;  }}

Statistics: Posted by irenuyam — Mon Dec 09, 2024 8:58 am