Ubermenu3 Footer Columns - responsive

Support
#1

Hi guys,

I am working on a website using Ubermenu3 Footer columns and I can’t work out how to get the columns to break into a nice mobile format.

The site is: http://design-munky.com/Explorer/

When the footer breaks into the first break point, all the menu items seem to only be showing in the width of the first column. I’d like to set it:

  1. So the footer items stretch across the entire width of the screen once they break.
  2. So they appear open (not closed) when they break.

Can you please help me with this?

Cheers,
Darren.

#2

Hi Darren,

Look for the following CSS:

.x-colophon .x-column.x-md:first-child {
		width: 10%;
		overflow: hidden
	}
	.x-colophon .x-column.x-md:nth-child(2) {
		width: 20%;
	}
	.x-colophon .x-column.x-md:nth-child(3) {
		width: 15%;
	}
	.x-colophon .x-column.x-md:nth-child(4) {
		width: 35%;
	}

By default, those widgets footer columns is responsive. Column width will be 100% on smaller screen. This responsive settings was overridden by above custom CSS. We have to edit above CSS to make sure that it will only work on large screen. We can add it inside a media query like below:

@media (min-width:981px){
.x-colophon .x-column.x-md:first-child {
		width: 10%;
		overflow: hidden
	}
	.x-colophon .x-column.x-md:nth-child(2) {
		width: 20%;
	}
	.x-colophon .x-column.x-md:nth-child(3) {
		width: 15%;
	}
	.x-colophon .x-column.x-md:nth-child(4) {
		width: 35%;
	}
}

Hope this helps.

#3

Thanks Lely, that fixed the width issue.

Can you please tell me how I can set it so there is no toggle buttons for the footer menus and they appear open all the time?

Cheers,
Darren.

#4

Hello Darren,

You’re always welcome.
For the toggle, please check Ubermenu settings. See this guide: http://sevenspark.com/docs/ubermenu-3/responsive/toggles.

Ubermenu documentation is very detailed. For more guidance, check the documentation here: http://sevenspark.com/docs/ubermenu-3

Cheers!

#5

Thanks again Lely.

I was able to sort out the responsive toggle issue, but I’d like to further refine the way the footer columns break.

Am I able to set it so that between 979px - 481px, the first three columns show across the screen with the fourth column underneath?

Cheers,
Darren.

#6

Hi Darren,

You’re always welcome!

That is possible by combining minimum and maximum CSS media query. It is like above CSS, just using a different media query and using different column width.

#7

Hey Lely,

I’ve tried the following CSS and it doesn’t seem to work. Can you see what I’m doing wrong here?

@media (min-width:981px){
.x-colophon .x-column.x-md:first-child {
width: 10% ;
overflow: hidden
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 20% ;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 15% ;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 35%;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li a{
color:#d8d8d8;
}
}

@media (min-width:400px) and (max-width:980px){
.x-colophon .x-column.x-md:first-child {
width: 25%;
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 25%;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 30%;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 100%;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li a{
color:#d8d8d8;
}

#8

Hi there,

Please use proper close bracket and semi-colon, like this

@media (min-width:981px){
.x-colophon .x-column.x-md:first-child {
width: 10% ;
overflow: hidden;
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 20% ;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 15% ;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 35%;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li a{
color:#d8d8d8;
}
}

@media (min-width:400px) and (max-width:980px){
.x-colophon .x-column.x-md:first-child {
width: 25%;
}
.x-colophon .x-column.x-md:nth-child(2) {
width: 25%;
}
.x-colophon .x-column.x-md:nth-child(3) {
width: 30%;
}
.x-colophon .x-column.x-md:nth-child(4) {
width: 100%;
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li a{
color:#d8d8d8;
}



}

Cheers!

#9

Hi,

I tried this code and it still doesn’t seem to work. It doesn’t break into the second @media group (400px - 980px)

Cheers,
Darren.

#10

Hi Darren,

We can always use browser developer tools to check why certain CSS is not working. Let’s analyze your current CSS. You want the first 3 columns on 1 ROW. To achieve that, we have to divide 100% to 3 columns and it’s margin. It could be like this: 25% + 4% + 25% + 4% + 42%. 4% is the margin in between columns. When working with columns we see it as boxes that we have to fit on a certain container.

@media (min-width:400px) and (max-width:980px){
.x-colophon .x-column.x-md:first-child {
    width: 25%;
    float: left;
    margin-right: 4%
}
.x-colophon .x-column.x-md:nth-child(2) {
   width: 25%;
    float: left;
    margin-right: 4%;
}
.x-colophon .x-column.x-md:nth-child(3) {
    width: 42%;
    float: left;
}
.x-colophon .x-column.x-md:nth-child(4) {
    width: 100%;
    clear: both;
}
.x-colophon .x-column.x-md:nth-child(2) .widget,
.x-colophon .x-column.x-md:nth-child(3) .widget {
    margin-top: 0; /*reset widget top margin*/
}
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-nav li a{
color:#d8d8d8;
}
}

See this: https://screencast-o-matic.com/watch/cbjw6JInzl

#11

Awesome! - working exactly how I wanted it now!

Really do appreciate the level of support here - big thanks!

Cheers,
Darren.

#12

You’re always welcome Darren!

Cheers.