Responsive icon menu?

Support
#1

Hi,
I’m tryin to make a responsive icon menu for my web but actually I can’t.
I have a section and 2 rows with 4 columns/icons inside. When I browse it from mobile the icons go in 1 column and I like to make it at least in 3/4 rows.
I tried many configurations but nothing helps.
Thanks

[Album] Imgur

#2

Hi There,

Thank you for writing in! That is possible but we need to make it a 2 columns row on a narrow screen device, because if not the icons will overlap to each other. To do this, please add this to Theme Options > CSS


@media (min-width: 545px) and (max-width: 767px) {
	.stay-inline .x-column.x-sm {
		float: left;
	    width: 22%;
	    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:last-child {
		margin-right: 0;
	}
}

@media (max-width: 544px) {
	.stay-inline .x-column.x-sm {
		float: left;
	    width: 48%;
	    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:nth-child(2n) {
		margin-right: 0;
		margin-bottom: 1.69em;
	}
	.stay-inline .x-column.x-sm:last-of-type {
		margin-bottom: 0;
	}
}

Then add the CLASS stay-inline on the section where your icons are placed.

Hope that helps,
Cheers!

1 Like
#3

Perfect! it works!
Thanks a lot!

#4

You are most welcome!

1 Like
#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.