Docs

[Emmagray]

I have put 3 custom menus in 3 footer widgets. How can get them closer together and smaller? Also, the 2nd level menu under “My Account” is showing. I just want it to drop down when the customer hovers.

https://emmagrayboutique.com

[Darshana]

Hi there,

Thanks for writing in! It seems that you have enabled a coming soon page in your site. Could you please provide us a way to access your site, so that we can assist you further.

Thanks!

[Emmagray]

This reply has been marked as private.

[Thai]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

footer.x-colophon.top .x-container.max.width {
    width: 60%;
}
footer.x-colophon.top .menu li a {
    font-size: 12px;
}
footer.x-colophon.top .menu ul.sub-menu {
    display: none;
}
footer.x-colophon.top .menu .menu-item-has-children:hover .sub-menu {
    display:block;
}

Hope it helps.

[Emmagray]

Better! Can we shift them all the way to the left and put the menu items closer together vertically? I just don’t want those taking up so much space in my footer.

You guys rock!

[Rupok]

Hi there,

Thanks for updating! Sorry but I didn’t get you clearly. How do you want them closer? Note that you are using different widget for those and each widget have their own space (1 column each) and you can place up to 4 widgets (4 columns). So if you want them more closer then you can place them in a single widget (1 column).

If you have other concern, please clarify properly with some screenshot that what are really trying to achieve.

Thanks

[Emmagray]

Here is a mock up of my site:
[IMG]http://i57.tinypic.com/2564gv7.jpg[/IMG]

Here is how I would like it to look:
[IMG]http://i59.tinypic.com/rj1v2b.jpg[/IMG]

If I need to send these differently, let me know.

[John Ezra]

Hi there,

Thanks for updating the thread! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

footer.x-colophon.top .x-column.x-md.x-1-3 {
    width: 20%;
}

Hope this helps – thanks!

[Emmagray]

Hello, I tried that but it didn’t scoot them all the way to the left of the footer area and there is still a big gap between each menu item. Were you able to open the screenshots I sent?

[Darshana]

This reply has been marked as private.

[Emmagray]

This reply has been marked as private.

[Jade]

Hi there,

It seems like if we shift that content in that area all the way to the left and make the menu closer to each other, it would create an empty space to the right.

But if you are fine with that you please use this CSS in the Customizer:

footer.x-colophon.top .x-container.max.width {
    width: 100%;
}

And from the previous CSS suggestion at https://community.theme.co/forums/topic/how-to-make-menus-in-footer-widgets-smaller-and-closer-together/#post-383775, you may adjust width: 20%; to a value of your liking.

Then the footer area should look like this: http://www.screencast.com/t/Oi7WyMBq

Hope this helps.

[Emmagray]

Ok, great. I was going to use the editor to put something in the black space on the right. I’ll play with it and see how it looks.

Thanks again!

[Friech]

Cool, please let us know how it goes.

Cheers!

[Emmagray]

The only thing I can’t figure out how to fix now is how to single space the menu items. Right now they look double spaced. It makes for alot of scrolling on a mobile device.

[Author]

Posts